一行div内的图像对齐 [英] Image alignment within a row of divs
本文介绍了一行div内的图像对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一排div,我想要的图像垂直和水平中心。
I have a row of divs which I would like the images to centre vertical and horizontally.
<div id="treatments-wrapper">
<div class="heading">
<h2>Our Treatments</h2>
</div>
<div class="treatments-logo">
<a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
</div>
<div class="treatments-logo">
<a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
</div>
<div class="treatments-logo">
<a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a>
</div>
</div><!--treatments-wrapper-->
#treatments-wrapper {
width:960px;
height:100px;
float: left;
margin: 10px 0;
border-bottom: #373839 solid 10px;
}
.treatments-logo {
width: auto;
height: 60px;
float: left;
margin: 0 8px;
}
.treatments-logo img {
display: block;
margin: auto;
}
.heading {
width:960px;
height: 40px;
background-color: #373839;
float: left;
margin:
}
这里是 jsfiddle
对于这个例子,我使用了相同的图片3次,但它将会有一排不同的标志,全部具有不同的高度和宽度。
For this example I have used the same image 3 times, but it will be a row of different logos, all with different height and widths. Can anyone suggest something I could try out?
推荐答案
try display:table-cell; with vertical-align:middle;
try display:table-cell; with vertical-align:middle;
.treatments-logo {
width: 1%;
display:table-cell;
height: 60px;
vertical-align:middle;
}
这篇关于一行div内的图像对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文