Question

我有一个html菜单（我使用bootstrap）

menu

代码：

content.contentTitle = "My awesome photo"

我需要让所有缩略图元素具有相同的高度，并使文本内容（或文本和图像）在缩略图的中间垂直对齐。我尝试了很多css选项，没有结果

Answer 1

试用此代码复制并粘贴或点击此处http://www.bootply.com/ROQKyZOwEm

 <div class="container">
 <div class="row">
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://lorempixel.com/400/200/" alt="125x125">
              <div class="caption">
     <h3>Thumbnail label</h3>
  </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://lorempixel.com/400/200/" alt="125x125">
                   <div class="caption">
     <h3>Thumbnail label</h3>
  </div>

        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://lorempixel.com/400/200/" alt="125x125">
                   <div class="caption">
     <h3>Thumbnail label</h3>
  </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
            <img src="http://lorempixel.com/400/200/" alt="125x125">
                   <div class="caption">
     <h3>Thumbnail label</h3>
  </div>
        </a>
    </div>
   </div>
  </div>

Answer 2

我用相同的html和css创建了一支相同的笔：

试试这个：PEN

    ul {
     margin:0;
     padding:0;
     list-style:none;
     overflow:hidden;
    }
    ul.thumbnails li {
     float:left;
     border:1px solid red;
   }
   ul.thumbnails li img {
     vertical-align:middle;
     display:block;
     border:1px solid black;
  }

Answer 3

水平对齐通常可以使用margin: 0 auto

最重要的是，我发现这在过去使用转换属性非常有用..

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 4

尝试如下：

http://jsfiddle.net/hh7bLvpv/1/

确定编辑我认为这是更好的解决方案：

检查更新后的小提琴：http://jsfiddle.net/hh7bLvpv/2/

更新版本在这里，无论图像的高度/大小如何，都会让图像被炸毁并居中;（请注意img周围新添加的容器和类）

.img--container {
    height: 0;
    width: 100%;
    padding-bottom: 150px;
    position: relative;
    overflow: hidden;
}

.fullwidth {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    min-width: 100%;
    height: 100%;
    margin: auto;
}

标准版

ul {
    list-style-type: none;
    width: 100%;
}

.item {
    width: 20%;
    position: relative;
    display: inline-block;
}

.thumbnail {
    width: 100%;
    text-decoration: none; 
    text-align: center; 
    background: #ffffff;
}

.img {
    height: 150px;
}

Answer 5

ul {
  list-style:none;
}

ul:after {
  display:block;
  content: "";
  clear:both;
}

ul li {
  float:left;
  margin: 0 10px;
}

ul li span {
  align-self: flex-end; 
    width: 100%; 
}

.thumbnail {
vertical-align: middle;
  text-decoration: none;
  text-align: center;
  background: #ffffff;
  display: -ms-flexbox!important;
  display: -webkit-flex!important;
  display: flex!important;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  width: 120px;
  flex-direction: column;
}

<div class="container">
<ul class="thumbnails" style="text-align: center">
<li class="">
<a href="path" target="_blank" class="thumbnail" style="vertical-align: middle; text-decoration: none; text-align: center; background: #ffffff;">
<img src="http://dummyimage.com/120x168/000/fff" alt="trigstopfactor" width="120" height="150" /><span>descr</span></a>
</li>
  
  <li class="">
<a href="path" target="_blank" class="thumbnail" style="vertical-align: middle; text-decoration: none; text-align: center; background: #ffffff;">
<img src="http://dummyimage.com/120x168/000/fff" alt="trigstopfactor" width="120" height="150" /><span>descr</span></a>
</li>
  
    <li class="">
<a href="path" target="_blank" class="thumbnail" style="vertical-align: middle; text-decoration: none; text-align: center; background: #ffffff;">
<img src="http://dummyimage.com/120x168/000/fff" alt="trigstopfactor" width="120" height="150" /><span>descr</span></a>
</li>
  
  </ul>

Answer 6

这是我使用过的代码段，它依赖于flexbox：

  height:100%;

  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-align:center;
  -webkit-align-items:center;
  -webkit-box-align:center;

  align-items:center;

ul中元素的Vetical对齐> li> a＆gt; IMG

6 个答案: