如何根据文本将图像对齐到中心

Question

我希望我的图像相对于左侧文本垂直对齐到中心，这样当屏幕尺寸发生变化时，图像仍然相对于文本保持在中心。 我尝试使用 vertical-align:middle 但没有任何效果。

#content .col {
  float: left;
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
}

#content .col {
  height: 1000px;
}

#content .col img {
  float: right;
  vertical-align: bottom;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}

<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="img/bg.jpg" style="vertical-align:bottom">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

Answer 1

vertical-align 适用于 display:inline-block 和 table-cell，不适用于 floats...

最好在这里尝试Flexbox

#content {
  display: flex;
  align-items: center;
}

#content .col {
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}

<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="http://via.placeholder.com/350x150">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

---

使用inline-block 和vertical-align...我已经使用font-size:0 到父级来删除内联元素之间的空间

#content {
  font-size: 0;
}

#content .col {
  font-size: initial;
  width: 50%;
  display: inline-block;
  padding: 10px;
  background: white;
  font-size: 19px;
  vertical-align: middle;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}

<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="http://via.placeholder.com/350x150">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>

Answer 2

尝试将此添加到您的 CSS 代码中：

.col.imgcol { display: block; text-align:center; }

这应该可以解决您的问题，因为此元素是您图片的父元素。因此，如果将其设置为一个块并将其所有内容设置为中心，则图像将移至中心，并且无论何时屏幕变小或变大，它仍会停留在中间。

希望这对你有用！

问候。