Question

我想垂直居中左侧图片旁边的文字，但似乎可以这样做

＆＃13;

.socialShare {
  position: relative;
  &__CTA {
    position: absolute;
    bottom: -30px;
    background-color: #d0d0d0;
    padding-right: 18px;
    height: 38px;
    img {
      display: inline;
      height: 38px;
      width: 38px;
    }
    p {
      display: inline;
    }
  }
}

＆＃13;

<div class="socialShare">
  <strong>
              <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg" height="350" width="700" />
            </strong>
  <div class="socialShare__CTA">
    <img src="dist/images/arrow.jpg" alt="">
    <p>Share image</p>
  </div>

＆＃13;

下面是一个代码，我已经得到了一个例子。

CodePen Link

Answer 1

假设您正在讨论页面底部的分享按钮，只需将vertical-align: middle;添加到图片的CSS属性中，就会将文本垂直居中放在旁边。

Answer 2

向img元素添加垂直对齐，将前进文本拉到外部div标记的中心。像这样：

  img {

    display: inline;
    height: 38px;
    width: 38px;

    vertical-align: middle;
  }

Answer 3

我相信你的css也有一些嵌套错误你还有图像上的高度和宽度属性，应该移动到你的CSS

.socialShare {
  position: relative;
}

.socialShare strong img {
  height: "350px";
  width: "700px";
}

.socialShare__CTA {
  position: absolute;
  bottom: -30px;
  background-color: #d0d0d0;
  padding-right: 18px;
  height: 38px;
}

.socialShare__CTA img {
  display: inline;
  height: 38px;
  width: 38px;
  vertical-align: middle;
  /* <-- add this line */
}

p {
  display: inline;
}

<div class="socialShare">
  <strong>
    <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg"  />
  </strong>

  <div class="socialShare__CTA">
    <img src="dist/images/arrow.jpg" alt="">
    <p>Share image</p>
  </div>

</div>

将文本居中放在图像中间

3 个答案: