情况一:文字居中
用到属性:text-align和line-height
<div class="div1">
Link
</div>
.div1{
width:800px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
line-height: 200px;
}
情况2:图片居中
方法一:
用到属性:外部容器设置text-align使图片水平居中,padding-top控制图片在垂直方向的位置(或者为内部元素添加margin-top),此方法要计算图片及外部容器的高度。
注:常见的块级元素:body、div、p、h1~h6、ul、form、table
常见的内联元素:a、span、img、label、input、select、textarea
<div class="div1">
<img src="demopic.png">
</div>
.div1{
width:800px;
height:200px;
background-color: cornflowerblue;
text-align: center;
overflow:hidden;
}
img{
margin-top:25px;
}
以下方法均为水平且垂直居中
方法二:
对div1添加line-height:200px(等于外部容器高度),对img设置vertical-align:middle;
方法三:
在img标签前加span标签,并对span和img设置vertical-align:middles使其垂直居中
<div class="div1">
<span></span>
<img src="demopic.png">
</div>
.div1{
width:800px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
overflow: hidden;
}
img{
vertical-align:middle;
}
span{
height:100%;
display:inline-block;
vertical-align:middle;
}
方法四:
将外部容器的显示模式设置成display:table, img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
<div class="div1">
<span><img src="demopic.png"></span>
</div>
.div1{
width:800px;
height: 200px;
background-color: cornflowerblue;
text-align: center;
display: table;
overflow: hidden;
}
img{
vertical-align:middle;
/*span内部也垂直居中*/
}
span{
display:table-cell;
vertical-align:middle;
}
多个图片居中:只需在div里添加多个img即可。注:若需去除图片之间的间距可在外部容器中设置font-size:0来兼容chrome和firefox,或者将img与外部容器写在同一行
综合小栗子;
<div class="top-content">
<p><img src="images/hp1.png"></p>
<p class="middle">江流儿</p>
</div>
.top-content {
width: 100%;
height: 200px;
background-image: url("images/backg3.jpg");
background-size: cover;
text-align: center;
padding-top: 13%;
overflow: hidden;
}
img {
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 0 0 10px rgba(62, 99, 114, 0.8);
}
.middle {
font-size: 22px;
color: rgb(120,120,120);
}