Htmlcss图⽚⽂本对齐问题
最近⼀直在写项⽬，今天总结⼀个常见的问题，就是在⼀个box⾥如何使图⽚按照我们的效果与⽂字对齐。
⾸先我们给图⽚和⽂字同时放到⼀个box⾥，
<ul>
<li><a><img src="img/xiaotu_1.jpg" alt=""/>科⽐</a></li>
</ul>
做如下样式：
ul{
width:300px;
height:100px;
text align centermargin: 100px auto ;
border: 1px solid #000;
}
可以想到效果如下：
假如我给ul 或者ul li加⼀个text-align：center；你能想到效果吗？效果都是⼀样的，因为该属性具有继承性，⼦集会继承该样式。但是这种效果，有⼏种办法可以实现，每种办法的原因是什么？
第⼀种：浮动法
Li{
float:left;
line-height:100px;/*为了使⽂字居中显⽰，如果图⽚不浮动，⾏⾼没有效果*/
}
img{
margin-top:10px;
margin-left:86px;
margin-right:20px;/*撑开⽂字向右*/
}
第⼆种：定位法
Li{
position:relative;
line-height:100px;/*为了使⽂字居中显⽰，如果图⽚不定位，⾏⾼没有效果*/
}
img{
position:absolute;
top:10px;
top:10px;
left:86px;
}
a{
display: block;
/*display: inline-block；都可以主要是为了给⽂字设置外边距*/ margin-left: 186px;
}
第三种：垂直居中对齐vertical-align:middle;
li{
text-align:center;/*使⽂本左右居中*/
line-height: 100px; /*使⽂本上下居中*/
}
效果如下：
接着对img进⾏设置
img{
vertical-align: middle;
}
写在⼀起代码为：
li{
text-align:center;/*使⽂本左右居中*/
line-height: 100px; /*使⽂本上下居中*/
}
img{
vertical-align: middle;
}
效果如下：
第四种：⽂本靠左对齐text-align:left;
li{
text-align: left;
line-height: 100px;
}
img{
margin-right:20px;
margin-left:86px;
vertical-align:middle;
}
看到这⾥，我想应该明⽩了，⼀共有两种思路，⼀种为了能通过line-height控制⽂本的⾼度，使img脱离⽂本流，⼀种是利⽤vertical-align为middle的对齐⽅式进⾏设置。总起来⽐较第⼀种和第⼆种都是脱离⽂本，但是定位需要给⽂字包⼀层标签需要做样式设置所以相⽐之下没有定位没有浮动的办法好。第三四种相⽐较，其实第四种就是第三种的衍⽣，⽤固定值的时候容易受到分辨率的影响，还是第三种办法最好，代码简洁，就能实现效果，第三种办法的缺点是当图⽚的宽度或者⾼度超过⽗级元素的时候就会⾏⾼就会失效，把⽂字挤出去。
图⽚默认是⽂本流，所以刚开始设置text-align:center；有效果，但是这时候⽂本的⾏⾼默认是图⽚的⾼度80px，当我对 li标签设置⾏⾼的时候，这时候后⽂字的⾼度就是设置后的⾏⾼，图⽚要相对⽂字对齐。对其进⾏浮动后图⽚脱离⽂档流，如果li没有设置⾏⾼，默认的是⾏内最⾼地⾼度，⽂字的⾼度。
图⽚的vertical-align的属性为下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。