居中吧，伙伴们

1.内容居中

body{

　　text-align:center;

}

2.宽高固定的DIV

body{

　　text-align:center; //兼容各浏览器

}

div{

　　position:absolute; //使div脱离文档流

　　left:50%; //使用百分比，使得适用各种分辨率的屏幕

　　top:50%;

　　margin-top:-height/2; //利用负外边距，将div拉回1/2处，使其居中

　　margin-left:-width/2;

}

3.宽固定

div{

　　width:[给定值];

　　margin:0 auto; //上下为0，左右自动，在IE下为0

}

4.行内居中

设置line-height等于行高，text-align:center;

未完待续。。。。。。

居中吧，伙伴们,布布扣,bubuko.com

时间： 2024-11-10 07:49:20

居中吧，伙伴们的相关文章

HTML5图片居中的问题

刚开始接触html5,准备写一些网页,但是学习的过程中遇到了图片不能居中的问题,首先来看看,代码和执行效果: <!DOCTYPE html><html> <head>  <meta charset="utf-8"> <title>图片居中问题</title> </head> <body> <im

一.水平或垂直居中 1. 单行内容垂直居中 /*height = line-height*/ .center{ height: 4em; line-height: 4em; overflow: hidden; /*保护布局,非必须*/ } 支持:所有块级.内联元素.所有浏览器缺点:只能显示一行 2. div水平居中  <div class="center">div居中了</div> body{ text-align:cen

布局小窍门之----让头部和主干内容居中

平时写布局的时候要保证头部标题或者横向的菜单和主体内容居中,可以将定义一个样式,比如: <style> .container{ width: 980px; margin: 0 auto; } </style> 头部和主体部分样式都放在带有该样式的标签里: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

页面无法居中的原因

网页制作:margin:0 auto;无法居中解决方法很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小一在这里说两个典型的错误引起的不能居中的问题: 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码,根本没有设置DIV的宽度,如

#个人博客作业week2——结对编程伙伴代码复审

General 1.程序能够顺利地运行.程序通过命令行输入,能够向对应的文件中输出符合要求的题目和答案.程序能够根据用户的不同选择,进行题目的生产或答案的校验,生成出的题目符合参数要求和项目的查重等各种要求,答案校验准确迅速. 2.代码逻辑清晰,没有令人难以理解的部分. 3.他的编码风格与我相似,大括号的使用让我能很清楚地划分模块.变量名很函数名的命名做到了”望文生义“. 4.阅读过程中没有发现冗余重复多余的代码,项目中没有任何一个部分注释掉代码. 5.代码模块化十分清晰,主要分为了表达式,分数

<转载>使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div块上下左右居中</title> </head> <body> <div id="div2"> </div> <style> *{p

Js打开网页后居中显示

使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>打开居中的窗口</title> <script language="javascript"> //参数-url:要打开的网站,winname:打开后

Js配合CSS实现的图片居中

CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向都居中,也不是上下左右居中,位于网页的正中央,代码如下: <body onresize="myLoad()" > <div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolut