手机端如何实现圆角图片flex布局实现垂直居中中 求助

来源：蜘蛛抓取(WebSpider) 时间：2016-12-21 17:23 标签： 圆角边框字体居中
页面已拦截
无锡网警提示您：
该网站已被大量用户举报，且存在未经证实的信息，可能会通过各种手段来盗取您的账号或骗取您的财产。本文讲的是css使用display:table-cell实现图片垂直居中，
在E8及以上版本及大部分的主流浏览器测试效果
&div class=&img&&
&img src=&../images/a-1.jpg& alt=
在E8及以上版本及大部分的主流浏览器测试效果
&div class="img"&
&img src="../images/a-1.jpg" alt="" /&
display:table-
vertical-align:
width:400 height:500
text-align:
border:#CCC 1
/*IE7不支持该方法*/
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索测试
，以便于您获取更多的相关知识。
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、PostgreSQL、高...
云栖社区()为您免费提供相关信息，包括
的信息，还有等
，所有相关内容均不代表云栖社区的意见！关于使用vertical-align使图片垂直居中的小细节
对于大小未知的图片如何水平垂直居中是大家一直以来经常会遇到的问题，个人觉得水平居中比较好处理，然而垂直居中却不那么好办。
很多人都知道，有一个方法就是设置其父元素的行高line-height等于高度height，然后利用vertical-align:达到垂直居中的效果，那么我们来看一下这种方法是不是可行。
html 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Title&/title&
padding:0;
margin-top: 50
height: 400
line-height: 400
text-align:
background-color: #A2A590;
vertical-align:
&img src=&styles/images/xlf.jpg& alt=&logo& id=&logo& /&
这段代码中xlf.jpg是一个200*200的图片，以下为输出结果：
看上去是不是居中显示了？其实并不是，我们将div的高度设置小一点看看：
html 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Title&/title&
padding:0;
margin-top: 50
height: 210
line-height: 210
text-align:
background-color: #A2A590;
vertical-align:
&img src=&styles/images/xlf.jpg& alt=&logo& id=&logo& /&
结果如下：是不是可以看出来图片明显没有居中？
那么这是为什么呢？ 在css权威指南中是这么说的：
vertical-align:middle这个值通常适合于图像，因为它使元素的纵向的中点对齐本行的“中间”。行的中间定义为基线以上半个ex处的那个点，而ex的值源于父元素的字体尺寸。在实际应用中，因为大多数用户代理将1ex等同于0.5em，middle将会是元素的纵向重点与父元素基线以上四分之一em处的一个点对齐。
要理解这里首先要清楚基线和ex的概念。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。而ex则指的是小写字母“x”的高度。那么结合下图来看：
不难看出ex与字体大小相关，而且基线上0.5ex处并不是中线的所在，因而会产生之前的偏差。我们可以通过增大字体来验证这个猜想是否正确：
html 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Title&/title&
padding:0;
margin-top: 50
height: 210
line-height: 210
font-size: 80
text-align:
background-color: #A2A590;
vertical-align:
&img src=&styles/images/xlf.jpg& alt=&logo& id=&logo& /&
结果如图：发生了明显的偏差。
所以解决这个小bug的方法就是设置字体大小为0。如下：
html 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Title&/title&
padding:0;
margin-top: 50
height: 210
line-height: 210
font-size: 0;
text-align:
background-color: #A2A590;
vertical-align:
&img src=&styles/images/xlf.jpg& alt=&logo& id=&logo& /&
结果如图：
nice啊。。。感谢感谢，解决了心里一个疑问，我写的话，都是vertical-align:* px 来控制，不过会有很多问题，再次感谢
其实理解了基线就差不多了 //：感觉好晕
终于明白为啥我的图和文字对不齐了
对基线理解很深啊。我每次看基线部分的知识都会觉得很模糊，尤其是em,ex和字体种类没有深入地去研究
4 总笔记数
1万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：移动端重构的时候，常见图文居中分两种，一种是这样图片跟文字呈上下结构的
这种比较简单，在这里就不详细说了。
今天群里有人问到了另外一种的，类似这样的，图片与文字呈左右结构的，并且图文水平垂直居中
大致意思就是，图片跟文字是左右结构，图片可以根据屏幕大小变化，右边文字有可能一行，有可能多行，都要求在那个方框里面垂直居中。并且图片跟文字整体在方框里面也是水平垂直居中的。甚至那个方框的高都不是固定的。
正好自己前些天也碰到这问题，当时赶项目做得有点粗糙，今天重新写写。
上次那项目做的- -要是万一文字变多了，我那里又得改一些padding之类的值，现在不用担心了。
阅读(...) 评论()

我要回帖

更多关于 圆角边框字体居中 的文章

 

随机推荐