这是我问题的Jsfiddle。
基本上我的网站上有一个显示器,显示一些带有文字的图像。我遇到的问题是图像下的文字离图像本身太远而且没有对齐。
图像不是静态高度。宽度始终为80像素,但高度从80px到150px不等
如您所见,图像显示不对齐。我想要做的就是将图像下面的文字放在最高高度的图像下的一行中。
HTML
<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/100/sports" />
</div>
<div>SPORTS</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/140/fashion" />
</div>
<div>FASHION</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/120/animals" />
</div>
<div>ANIMALS</div>
</li>
</ul>
CSS
ul {
list-style: none;
padding: 0;
margin: 0 0 10px 25px;
}
.ccarousel-item {
float: left;
overflow: hidden;
display: inline-block;
zoom: 1;
margin: 0;
padding: 0;
}
.pImgContainer {
height: auto;
width: 120px;
line-height: 110px;
padding-top: 10px;
margin: 0 auto;
}
编辑:我已经改变了我的HTML。我在小提琴中复制我的代码时犯了一个错误
答案 0 :(得分:2)
http://jsfiddle.net/27yj94v8/1/
ul{list-style:none;padding:0;margin:0 0 10px 25px;}
.ccarousel-item{float:left;overflow:hidden;display:inline-block;zoom:1;margin:0;padding:0;}
.pImgContainer{height:auto;width:120px;padding-top:10px;margin:0 auto;}
img+div{margin:0;padding:0;display:block;}
答案 1 :(得分:2)
首发
.pImgContainer div{
bottom:0;
position:absolute;
}
为了获得更好的体验,请设置
.ccarousel-item {
position:relative;
float: left;
display: inline-block;
zoom: 1;
margin: 0;
padding: 0;
}
.pImgContainer {
height:150px;
width: 120px;
line-height:110px;
padding-top: 10px;
margin: 0 auto;
}
.pImgContainer + div{
bottom:-15px;
position:absolute;
}
答案 2 :(得分:1)
将标题div移出div.pImgContainer
。
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<img src="http://lorempixel.com/80/100/sports" />
</div>
<div>SPORTS</div>
</li>
在你的css中添加图像容器的最小高度(或只是高度):
.pImgContainer{
min-height:150px;//the maximum height a picture could be
}
答案 3 :(得分:1)
问题出在css:
.pImgContainer {
height: auto;
width: 120px;
line-height: 110px; //Remove the line-height.
padding-top: 10px;
margin: 0 auto;
}
答案 4 :(得分:1)
只需简单地给.pImgContainer一个150px的高度,因为你知道它是你将拥有的最高值。
http://jsfiddle.net/27yj94v8/9/
.pImgContainer {
height:auto;
width: 120px;
line-height:110px;
padding-top: 10px;
margin: 0 auto;
height:150px;
}
答案 5 :(得分:0)
尝试以下mod
<ul class="list-items list-carousel no-js">
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"> <img src="http://lorempixel.com/80/100/sports" /></div>
<div>SPORTS<div>
</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"><img src="http://lorempixel.com/80/140/fashion" /></div>
<div>FASHION</div>
</div>
</li>
<li class="ccarousel-item">
<div class="pImgContainer fk-text-center">
<div class="image-box"> <img src="http://lorempixel.com/80/120/animals" /></div>
<div>ANIMALS</div>
</div>
</li>
ul {list-style:none;填充:0;保证金:0 0 10px 25px; } .ccarousel-item {float:left;溢出:隐藏; display:inline-block; zoom:1;保证金:0;填充:0; } .pImgContainer {height:auto;宽度:120px; line-height:110px; padding-top:10px;保证金:0自动; } .pImgContainer div {line-height:20px; }
.pImgContainer .image-box {height:150px; }