图片和文字在一行垂直居中

当图片和文本在一行的时候显示时效果很奇葩

文字和图片根本对不齐

想让文本对齐在图片垂直居中

这时候一般的方法是图片和文本盒子设置为行内快(inline-block)

图片给高度

文本盒子不要给高度

给他们都设置 vertical-align:middle;

<!doctype html>
<html><head><!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码--><meta http-equiv="Content-Type" content="textml; charset=utf-8" /><!--当前页面的三要素--><title>美女 - 木马老师</title><meta name="Keywords" content="关键词,关键词" /><meta name="description" content="描述" /><!--css,js--><style type="text/css">*{margin:0;padding:0;}body{font:14px '微软雅黑'; color:#000;}ul{list-style:none;}/*  wrap start  */.wrap{width:380px;margin:100px;}.wrap li{border-bottom:1px solid #ccc;padding:20px 0;}.wrap li img{width:90px;height:90px;border:4px solid #ccc;border-radius:50%;display:inline-block;vertical-align:middle;}.wrap li div{display:inline-block;width:260px;vertical-align:middle;margin-left:10px;}.wrap li img:hover{border-color:#fe9900;}h4{padding-bottom:10px;}h4:hover,p:hover{color:#fe9900;}/*end  wrap*/</style></head>
<body><!-- wrap start  --><ul class='wrap'><li><img src="data:images/1.jpg" alt="meinv"  /><div><h4>AmyRoiland</h4><p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p></div></li><li><img src="data:images/1.jpg" alt="meinv"  /><div><h4>AmyRoiland</h4><p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p></div></li><li><img src="data:images/1.jpg" alt="meinv"  /><div><h4>AmyRoiland</h4><p>「Amy Roiland」美国洛杉矶</p></div></li><li><img src="data:images/1.jpg" alt="meinv"  /><div><h4>AmyRoiland</h4><p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p></div></li></ul><!-- end wrap -->
</body>
</html>

图片路径自己换一下

图片和文字在一行垂直居中相关推荐

html中字体在上下边缘居中,图片与文字在一行上垂直居中的方法
不知大家在做网站的时候有没有遇到这样的情况:在一行上会插入一个小图标,然后在图标后面配上文字说明,可是发现往往图片和文字并不垂直居中,在一行上图片老是相对文字要偏上一些,显的很不好看,那么有没有办法使 ...
让图片和文字在一行中垂直居中对齐的方法
如果一个盒子有2列或者3列排列,有图片,有文字,怎么实现文字始终对齐图片的中间位置呢? 方法就是使用vertical-align:middle;也就是给一列都使用这个属性,需要注意的是:这个属性只对行 ...
图片或文字或box垂直居中
1,text-align:center可以使文字图片等行内元素居中,margin:auto;只能使块元素左右居中 2,line-height:100%/1;当前字体尺寸相乘来计算行间距,可以设置lin ...
关于图片与文字在一行显示时，文本的垂直方向位置的设置
对于img标签中的verticle-align的属性值只是为了去除其默认的属性-baseline,其默认为基线对齐即图片底层对齐,只要将其属性值设为其他值,就可以对文本进行竖直方向的位置设置,一般设 ...
IMG图片和文字同一行显示，图片和文字居中显示
问题其实很好解决,只要设定img标签的vertical-align CSS属性就好了,代码如下:
android 按钮图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示？...
图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完 ...
CSS让同一行的图片和文字垂直居中对齐
有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:mid ...
大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
【CSS】单行图片与文字垂直居中
单行图片与文字垂直居中核心关键,是在img标签中的style属性加入vertical-align:middle;样式如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的. 注意如下的代码的i ...

图片和文字在一行垂直居中

图片和文字在一行垂直居中相关推荐

最新文章

热门文章