如何用CSS水平、垂直居中

原创 2006年05月17日 11:50:00
1. 居中文本
要居中一个块级元素的文本,用text-align属性

程序代码 程序代码
h1, h2, h3 {

text-align:center;

}

另外一种方法就是使用margins来居中,这时文本要在它的容器里

程序代码 程序代码
h1, h2, h3 {

margin-left: auto;

margin-right: auto;

}

2. 居中表格
要居中一个表格,把表格作为一个div的子元素

程序代码 程序代码
<div class="center">

<table width="50%" border="1" cellpadding="30">

<tr>

<td>This is the first cell</td>

<td>This is the second cell</td>

</tr>

<tr>

<td>This is the third cell, it's under the first cell</td>

<td>This is the fourth cell, it's under the second cell.</td>

</tr>

</table>

</div>

添加以下规则

程序代码 程序代码
.center table {

margin: 0 auto;

text-align: left;

}

3. 居中图片
如果想要居中图片的话,在img外嵌套一个div元素

程序代码 程序代码
<div class="flagicon"><img src="flag.gif" alt="Flag " width="160 "

height="60" /></div>

添加以下规则

程序代码 程序代码
.flagicon {

text-align: center;

}

如果要想以固定宽度的值居中(例如图片),首先设置父元素的padding-left为50%,然后算一下要居中的图片宽度一半的值,把这个值的负数设置为图片的margin-left即可

程序代码 程序代码
<img src="wolf.jpg" width="256" height="192" alt="Photo of wolf.">

程序代码 程序代码
body {

padding-left: 50%;

}

img {

/* equal to the negative of half its width */

margin-left: -128px;

}

4.垂直居中
CSS里没有垂直居中,使用这条规则,可以使任何元素垂直居中

程序代码 程序代码
img {

position: absolute;

top: 50%;

left: 50%;

/* 元素高度一半的负数 */

margin-top: -96px;

/* 元素宽度一半的负数 */

margin-left: -128px;

height: 192px;

width: 256px;

}

如果想要同时垂直居中图片和文字,把图片和文字放到div里

程序代码 程序代码
<div id="centerFrame">

<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian

quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus

carborundum e pluribus unum. Defacto lingo est igpay atinlay.</p>

<img src="wolf.jpg" width="256" height="192" alt="Photo of

wolf." />

</div>

去掉高度属性,自己调整margin-top并使其居中

程序代码 程序代码
#centerFrame {

position: absolute;

top: 50%;

left: 50%;

/* adjust negative value until content is centered */

margin-top: -150px;

margin-left: -138px;

width: 256px;

}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

图片水平垂直居中css

  • 2010-05-20 15:19
  • 44KB
  • 下载

CSS水平垂直居中

水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中, 即父元素必须是块级盒子容器,父元素宽度必须已经被设定好以下讨论 参考这个结构 non-child ...

CSS使元素水平垂直居中的方法

1、使用绝对定位(position)和外边距(margin)       适用范围:子级元素(content)宽高固定       方法:(1)将父级 (box)设置成相对定位(relative);(...

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水...

元素布局——CSS水平垂直居中

关于html元素或文字水平+垂直居中的方法总结

收罗CSS布局中有关水平和垂直居中的N种方法

先来说说水平居中。  CSS水平居中的方法:  1、最常见的margin方法:  给元素设置一个显示式的宽度,然后加上margin的左右值为auto,示例:  复制代码...

CSS里的各种水平垂直居中基础写法心得

首先,依旧是概念。介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。   行内元...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)