水平和垂直居中
来源:互联网 发布:淘宝刷到单流程视频 编辑:程序博客网 时间:2024/05/16 12:59
1.7.1 高度小于1ex的图标的垂直居中:
“x”:x的底部是css中的基线;
x-height:小写x的高度;
1ex:一个小写x的高度。
原理:1ex相当于字母x,所以图片与文字TianJin的对齐,相当于文字x与文字TianJin的对齐,font-size都继承了父元素,自然能对齐。
<divid="down-weather">
<aclass="weather-which-city">
<pclass="name-city">TianJin</p>
<iclass="icon-select-city"></i>
</a>
<divid="weather_list">
<imgid="weather_img"src="images/weather.png"/>
</div>
</div>
.weather-which-city{
height:24px;
width:78.7344px;
margin-bottom:18px;
color:rgb(63,63,63);
font-size:20px;
}
.name-city{
display:inline-block;
width:46.7188px;
}
.icon-select-city{
display:inline-block;
height:1ex;
width:20px;
background-image:url(../images/select.png);
background-repeat:no-repeat;
background-position:center;
}
1.7.2 line-height和vertical-align配合垂直居中:
首先,设置父级块元素的line-height,因为vertical-align是相对于ling-height来算的;
其次,设置需要居中的元素vertical-align:middle,此时距离居中还差半个x的距离;
最后,设置父级元素的font-size:0,完全居中。
<divid="left-peo-pic">
<imgsrc="images/katie.png"alt="人"id="Katie" ">
</div>
#left-peo-pic{
width:300px;
height:110px;
line-height:110px;
display:inline-block;
font-size:0;
background-color: aquamarine;
}
#left-peo-picimg{
width:84px;
height:84px;
vertical-align:middle;
}
简单便捷的居中办法,添加以下em代码,并设置需要居中的元素vertical-align:middle。
<divid="left-peo-pic">
<imgsrc="images/katie.png"alt="人"id="Katie"style="vertical-align:middle;">
<emstyle="vertical-align:middle;height:100%;width:0;display:inline-block;">x</em>
</div>
1.7.3 利用text-align:center水平居中:
在父级元素中设置text-align:center可使得它的子元素水平居中显示,如下修改上面的样式可得到水平居中的效果。
#left-peo-pic{
width:300px;
height:110px;
line-height:110px;
display:inline-block;
font-size:0;
background-color: aquamarine;
text-align:center;
}
1.7.4 利用margin水平居中:
首先,将需要居中的元素设置为块状元素display:block,其次设置margin-left:auto和margin-right:auto,就可以实现水平居中的效果。
值得注意的是,将元素设置为块状元素后,无法通过以上方法实现垂直居中的效果,因为上述方法针对的是内联元素。
- 水平和垂直居中
- 水平居中和垂直居中
- 水平居中和垂直居中
- 水平居中 和垂直居中
- 水平居中和垂直居中
- DIV水平和垂直居中
- DIV水平和垂直居中
- css水平和垂直居中
- 表格水平和垂直居中
- div+css垂直居中和水平居中
- HTML水平居中和垂直居中
- css 水平居中和垂直居中
- CSS设置水平居中和垂直居中
- CSS垂直居中和水平居中
- 垂直居中和水平居中总结
- CSS水平居中和垂直居中解决方案
- CSS 垂直居中和水平居中
- html中的垂直居中和水平居中
- Missing error handler on `socket`. TypeError: socket.set is not a function
- Part 3 How to Tune Java Garbage Collection
- 番外篇-程序员和编译器之间的暧昧
- 三种 session存储方式
- C语言找素数
- 水平和垂直居中
- bzoj 1415 聪聪和可可 【期望】
- #ifndef/#define/#endif使用详解
- [期望 生成函数 卷积 导数] BZOJ 4001 [TJOI2015]概率论
- 键盘录入数据的3中实现方式
- Android通过ksoap2这个框架调用webservice大讲堂
- ZeroMQ 的模式
- 用Java写解谜RPG-2.Game与GameObject:内存与swing的交流
- Python GUI Programming (Tkinter)