Question

我想垂直对齐图像，但我遇到了麻烦。 http://jsfiddle.net/k9t5k7v0/1/

以下是我的代码，允许响应列表。但是，如何才能使所有矩形的徽标垂直对齐？

＆＃13;

.container {
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}
.container ul {
  padding: 10px;
}
#aff_rating {
  list-style-type: none;
}
#aff_rating li {
  float: left;
  margin-right: 6px;
  width: 100px;
}
#aff_rating li img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  #aff_rating li {
    width: 30px;
  }
}
.crop {
  height: 100px;
  width: 400px;
  overflow: hidden;
}
.crop img {
  height: auto;
  width: 100px;
}

＆＃13;

<div class="container">
  <ul id="aff_rating" style="list-style-type: none;">
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/pacific-life-lgo.jpg" alt="pacific-life-lgo" width="492" height="246" class="aligncenter size-full wp-image-2140" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Southwest-Securities-RGB.jpg" alt="Southwest Securities RGB" width="590" height="111" class="aligncenter size-full wp-image-2137" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Sterne_Agee.gif" alt="Sterne_Agee" width="215" height="38" class="aligncenter size-full wp-image-2138" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Wedbush.Logo_.png" alt="Wedbush.Logo" width="224" height="38" class="aligncenter size-full wp-image-2139" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/schwab.jpg" alt="CSchwab_logo_core_blue_DIGITAL" width="1050" height="1050" class="aligncenter size-full wp-image-2136" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/prudential-logo.png" alt="prudential-logo" width="400" height="400" class="aligncenter size-full wp-image-2134" />
    </li>
    </li>
  </ul>
</div>

＆＃13;

http://jsfiddle.net/k9t5k7v0/1/

Answer 1

您可以将table-cell和vertical-align应用于li元素的中间位置：

.container {
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}
.container ul {
  padding: 10px;
}
#aff_rating {
  list-style-type: none;
}
#aff_rating li {
  display: table-cell;
  margin-right: 6px;
  width: 100px;
  vertical-align: middle;
}
#aff_rating li img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  #aff_rating li {
    width: 30px;
  }
}
.crop {
  height: 100px;
  width: 400px;
  overflow: hidden;
}
.crop img {
  height: auto;
  width: 100px;
}

<div class="container">
  <ul id="aff_rating" style="list-style-type: none;">
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/pacific-life-lgo.jpg" alt="pacific-life-lgo" width="492" height="246" class="aligncenter size-full wp-image-2140" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Southwest-Securities-RGB.jpg" alt="Southwest Securities RGB" width="590" height="111" class="aligncenter size-full wp-image-2137" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Sterne_Agee.gif" alt="Sterne_Agee" width="215" height="38" class="aligncenter size-full wp-image-2138" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/Wedbush.Logo_.png" alt="Wedbush.Logo" width="224" height="38" class="aligncenter size-full wp-image-2139" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/schwab.jpg" alt="CSchwab_logo_core_blue_DIGITAL" width="1050" height="1050" class="aligncenter size-full wp-image-2136" />
    </li>
    <li class="crop">
      <img src="http://www.opsplus.com/wp-content/uploads/2014/12/prudential-logo.png" alt="prudential-logo" width="400" height="400" class="aligncenter size-full wp-image-2134" />
    </li>
    </li>
  </ul>
</div>

Answer 2

我在开始时遇到了同样的问题。但它真的很简单。将所有相关的CSS类设为vertical-align: middle;或display: table-cell，或者取决于

转到以下链接以了解其工作原理

http://css-tricks.com/almanac/properties/v/vertical-align/

Answer 3

为了使对象垂直对齐，它需要具有静态高度属性的父对象。如果孩子的父母没有静态高度属性，那么其祖父母需要静态高度属性，依此类推。静态高度属性我的意思是“px”，而不是“％”或“em”。

<div class='parent'>
    <div class='child'>Hello.</div>
</div>

示例1（位置+顶部）：http://jsfiddle.net/e1y0mtg5/1/

.parent {
    background: red; /* just for visual */
    position: relative; /* needed */
    height: 200px; /* needed */
}
.child {
    background:blue; /* just for visual */
    position: absolute; /* needed */
    top: 50%; /* needed */
    transform: translateY(-50%); /* needed */
}

示例2（td + valign）：http://jsfiddle.net/e1y0mtg5/2/

.parent {
    background: red; /* just for visual */
    height: 200px; /* needed */
    display: table-cell; /* needed */
    vertical-align: middle; /* needed */
}
.child {
    background:blue; /* just for visual */
}

如果你向html {}和body {}添加100％的高度，你可以欺骗静态高度要求，但绝对位置必须始终存在于孩子身上，这通常会（如果不是总是）导致其他几个惩罚会让你想撕掉你的头发。

html, body, .mydiv { height: 100%; }

我希望这些图像垂直对齐如何实现这一目标？

3 个答案: