css-对齐方式进阶案例
程序员文章站
2022-04-26 16:02:04
...
居中对齐
行内元素居中对齐
// 父元素设置
div
{
text-align:center;
}
块级元素居中对齐
- 固定宽度,设置margin
div
{
width:200px;
margin:0 auto;
}
- 使用
<table>
标签
因为<table>
标签自适应内容宽度,相当于固定宽度
table
{
margin:0 auto;
}
- 使用
display
改变成为行内元素:
div
{
display:inline;
text-align:center;
}
- 使用float及position属性:
// 父元素设置
div
{
float:left;
position:relative;
left:50%;
}
// 需要居中的子元素设置
div h1
{
position:relative;
left:-50%;
}
首先父元素向右浮动父元素的50%,然后子元素再向左浮动子元素的50%,即实现了子元素居中对齐。这样虽然子元素居中对齐,但是使用float属性后,该元素不在文档流中,可能于其他布局重合,此时要使用clear:both
来清除浮动属性,才能正常显示。
这样,我们要实现一个分页的样式,可以用下面方式:
// html代码
<div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
方式一:
div
{
display:inline;
text-align:center;
}
div ul
{
list-style:none;
}
div li
{
display:inline;
border:red solid;
padding:5px;
}
方式二:
div
{
float:left;
left:50%;
position:relative;
}
div ul
{
list-style:none;
position:relative;
left:-50%;
}
div li
{
display:inline;
border:red solid;
padding:5px;
}
最后效果图:
垂直居中
使用vertical-align:middle
属性就可以实现垂直居中,在<table>
标签中的td默认该属性,块级元素可以使用display:table-cell
然后**vertical-align
属性。
左右对齐
使用position属性
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
使用float属性
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
上一篇: Maven的依赖机制
下一篇: css左右居中对齐