如何用CSS水平、垂直居中
来源:互联网 发布:淘宝海外版客户端 编辑:程序博客网 时间:2024/05/08 07:56
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;
}
- 如何用CSS水平、垂直居中
- CSS水平垂直居中
- css水平垂直居中
- CSS 水平垂直居中
- CSS水平垂直居中
- css水平垂直居中
- css水平垂直居中
- CSS水平垂直居中
- css 水平垂直居中
- css垂直水平居中
- css水平垂直居中
- css水平垂直居中
- css 水平居中 垂直居中 水平垂直居中
- css居中控制 水平居中 垂直居中
- css img 居中/水平居中/垂直居中
- css div水平垂直居中
- 【CSS】屏幕水平-垂直居中
- CSS垂直/水平居中总结
- 友情链接
- MSComm控件在中文Windows下的通信问题与处理方法
- Ajax默默进行时
- WAP应用开发环境就是这样搭建的
- 最近在研究网站定位
- 如何用CSS水平、垂直居中
- 全国专业技术人员计算机应用能力考试
- ASP.NET中如何防范SQL注入式攻击
- 求答案: 为什么编译出来的自写的模块,其vermagic会和系统中的不一样?
- 纪念马加爵君(太强了,不得不转)
- “汉芯”真正伤害了民族的心
- 不放弃!
- JAVA里使用正则表达式二
- ASP.NET动态新增/减少控件的实现(VB)