关闭

如何用CSS水平、垂直居中

6988人阅读 评论(0) 收藏 举报
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;

}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17309次
    • 积分:265
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类