使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中div演示效果</title>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
</head>
<body>
<div class="align-center">居中div演示效果</div>
</body>
</html>
注意,需要加上上面的那句
才能生效,要是不想要这句的话,也可以给body加一个属性:
body{text-align:center;}
另外,让div内的内容(包括文字及图片)居中的代码是: text-align:center;
div居中的完美解决方案! (水平垂直居中)
1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平垂直居中div演示效果</title>
<style type="text/css">
.align-center{
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
}
</style>
</head>
<body>
<div class="align-center">水平垂直居中div演示效果</div>
</body>
</html>
分享到:
相关推荐
在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下:...
div中多行文字垂直居中
DIV和SPAN如何垂直居中对齐,水平居中很简单,设置text-align:center就可以了,垂直居中一直很是疑惑,下面为大家解惑
主要代码: position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<...
垂直居中对齐的核心代码如下: 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例,利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: <div...
垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,...
ie 火狐兼容而谷歌浏览器不兼容,div水平对齐的解决方式,仅供参考
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。CSS使图片垂直居中的代码:<!DOCTYPE ...
6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的...
jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。
这是一个 react-bootstrap Jumbotron,它的子项在水平和垂直方向上居中对齐。 使用 Flexbox 实现垂直对齐 使用text-align实现水平text-align 这种样式是使用内联style属性实现的 import CenterAligningJumbotron ...
4.图片始终保持水平垂直居中。 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么 display:table-cell;vertical-...
今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明: 外侧...
最近项目中碰到的问题,具体代码就不写了,大体说下思路,有两个div,包含关系,图片在小的div中,大的div实现小div垂直居中,或水平,小div再实现另一个方向上的居中就可以了,忘了说了,外面div style="display:...
※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column 相反...
.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现。CSS代码如下: 复制代码代码如下:[css] <p>.parentDiv {width:200px;height:100px;border: 1px solid #ececec;text-align:...
复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; height: 102px; vertical-align: middle;...