1. 居中文本
要居中一个块级元素的文本,用text-align属性
另外一种方法就是使用margins来居中,这时文本要在它的容器里
2. 居中表格
要居中一个表格,把表格作为一个div的子元素
添加以下规则
3. 居中图片
如果想要居中图片的话,在img外嵌套一个div元素
添加以下规则
如果要想以固定宽度的值居中(例如图片),首先设置父元素的padding-left为50%,然后算一下要居中的图片宽度一半的值,把这个值的负数设置为图片的margin-left即可
4.垂直居中
CSS里没有垂直居中,使用这条规则,可以使任何元素垂直居中
如果想要同时垂直居中图片和文字,把图片和文字放到div里
去掉高度属性,自己调整margin-top并使其居中
要居中一个块级元素的文本,用text-align属性
程序代码
h1, h2, h3 {
text-align:center;
}
text-align:center;
}
另外一种方法就是使用margins来居中,这时文本要在它的容器里
程序代码
h1, h2, h3 {
margin-left: auto;
margin-right: auto;
}
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>
<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;
}
margin: 0 auto;
text-align: left;
}
3. 居中图片
如果想要居中图片的话,在img外嵌套一个div元素
程序代码
<div class="flagicon"><img src="flag.gif" alt="Flag " width="160 "
height="60" /></div>
height="60" /></div>
添加以下规则
程序代码
.flagicon {
text-align: center;
}
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;
}
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;
}
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>
<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;
}
position: absolute;
top: 50%;
left: 50%;
/* adjust negative value until content is centered */
margin-top: -150px;
margin-left: -138px;
width: 256px;
}