Question

我有3个内联块元素，一个图像和两个文本。我想仅为图像修改类，使其中间对齐，而其他两个文本块保持顶部对齐。如果我将.subImg设置为vertical-align:top;而.subsection设置为vertical-align:middle;，而不是相反，那么它似乎才有效。为什么这样，我该如何解决？感谢

以下是代码：

DEMO

HTML

<div id="about">
    <div class="section">
            <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
            <div class="subsection">
                <h2>Blah</h2>
                <hr>
                <p>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
            </div>
            <div class="subsection">
                <h2>Blah</h2>
                <hr>
                <p> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
                </p>
            </div>
        </div>
</div>

CSS

.section{
    width: 100%;
    text-align: center;
    background-color:#fdfdfd;
 }

.subsection{
    vertical-align: top;
    margin: 20px;
    text-align: left;
    display: inline-block;
    max-width: 20%;
}

.subImg{
    vertical-align: middle;
    margin: 20px;
    text-align: left;
    display: inline-block;
    max-width: 20%;
}

Answer 1

jsfiddle-link

CSS中的vertical-align属性控制一行中彼此相邻的元素排列方式。

添加具有垂直对齐中间的div（vmid），这样div和图像是中间对齐的，并且在vmid内部放置垂直对齐的顶部元素。

HTML

<div id="about">
  <div class="section">
    <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
    <div class="vmid">
      <div class="subsection">
        <h2>Blah</h2>
        <hr>
        <p> blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>
        </p>
      </div>
      <div class="subsection">
        <h2>Blah</h2>
        <hr>
        <p> blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>blah
          <br>
        </p>
      </div>
    </div>
  </div>
</div>

CSS

.section {
  width: 100%;
  text-align: center;
  background-color: #fdfdfd;
}

.subsection {
  vertical-align: top;
  margin: 20px;
  text-align: left;
  display: inline-block;
  max-width: 20%;
}

.subImg {
  vertical-align: middle;
  margin: 20px;
  text-align: left;
  display: inline-block;
  max-width: 20%;
}

.vmid {
  display: inline-block;
  vertical-align: middle;
}

Answer 2

您可以使用flexbox。

.section{
  display: flex;
  align-items: flex-start;
}

并将图像与中心对齐

.subImg{
  align-self: center;
}

Demo

支持

注意flexbox支持。它现在非常好，但IE 9及以下版本不支持它。

Can I Use It

Answer 3

您可以在要垂直对齐的元素的父级上使用display: table属性。这是一个更新的小提琴，对HTML进行了一些调整：https://jsfiddle.net/ud14uhub/

<div id="about">
  <div class="section">
    <div class="subImgwrap">
       <img class="subImg" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="image">
     </div>
     <div class="subsection">
       <h2>Blah</h2>
       <hr>
       <p>  blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
     </div>
     <div class="subsection">
       <h2>Blah</h2>
       <hr>
       <p>  blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br></p>
     </div>
  </div>
</div>

<强> CSS：

.section{
    width: 100%;
  text-align: center;
  background-color:#fdfdfd;
  display: table;
}

.subsection, .subImgwrap {
  display: table-cell;
  float: none;
}

.subsection{
    vertical-align: top;
    text-align: left;
}
.subImgwrap {
  vertical-align: middle;
}
.subImg{
  text-align: left;
  width: 100px;
}

我将subImg包裹在一个包装div中，我用它来垂直对齐而不是图像本身。 .subsection和.subImgwrap的直接父级我设置为display: table，并将子项设置为display: table-cell。这使得垂直对齐在所有浏览器中更容易，更健壮。

vertical-align只有一个内联块元素

HTML

CSS

3 个答案:

支持