CSS居中
2015-09-14 10:12
555 查看
一、水平居中
方法1:
width:100px;/max-width: 100px;
margin:0 auto;
注意使用max-width时,元素内容的宽度在不足max时是虽内容本身变化的。
方法2(水平和垂直同时实现):
position:absolute;
width:400px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
方法3:
使用text-align:center。
#demo2 {
text-align: center;
}
#demo2_1 {
display: inline-block;
width: 50%;
background: red;
}
方法1:
width:100px;/max-width: 100px;
margin:0 auto;
注意使用max-width时,元素内容的宽度在不足max时是虽内容本身变化的。
方法2(水平和垂直同时实现):
position:absolute;
width:400px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
方法3:
使用text-align:center。
#demo2 {
text-align: center;
}
#demo2_1 {
display: inline-block;
width: 50%;
background: red;
}
相关文章推荐
- 基于CSS3实现的黑色个性导航菜单效果
- css3常用属性
- JS+CSS实现的简单折叠展开多级菜单效果
- JS+CSS简单树形菜单实现方法
- 深入了解css的行高Line Height属性
- css
- HTML&CSS Learning Notes 2 (Additional)
- JSdom操作内容,样式,属性
- CSS
- HTML&CSS Learning Notes 2
- css3实现卡片翻转
- 在selenium中使用css选择器进行元素定位
- CSS透明边框
- 响应式布局--引入外部样式
- CSS BFC
- CSS行高——line-height
- CSS解决未知高度的垂直水平居中自适应问题
- CSS 阴影怎么写?
- GMT5.1.2_基础_坐标轴的设置和离散点的样式控制
- Web前端从入门到精通-12 css简介——导航实例1