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; }

这应该可以解决您的问题，因为此元素是您图片的父级。因此，如果将其设置为块并将其所有内容设置为中心，则图像将转到中心，并且每当屏幕变小或变大时，它仍将保持在中间。

希望这适合你！

问候。

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

2 个答案: