HTML/CSS : I can't add some margin's in a span next to a floated element

Question

我试着有一个 float 的图像和它后面的一段。但我希望段落从中间开始，所以基本上没有对齐。所以我想把 margin-top 放在我的跨度上，但没有这样做。

例如我的代码

<div class="container">
  <article>
    <section>
      <p>
        <img style="float:left;" src="https://www.w3schools.com/images/w3schools_green.jpg" />
        <span style="margin-top: 25px;">Hello World! My name is James polar Good morning</span>
      </p>
    </section>
  </article>
</div>

代码笔:http://codepen.io/pango143/pen/LWJpmL

Answer 1

您可以使用 line-height 属性修复它。

将以下CSS代码添加到span元素

line-height: 110px;

或

设置display: table;为父元素和display: table-cell; vertical-align: middle; 到子元素。并且仅仅因为您的图像包含阴影并且它让眼睛认为图像比实际结束时间早，您可以使用 margin-top 属性将其向下移动。

这是你的CSS:

section p {
  display: table;
}

section p span {
  display: table-cell;
  vertical-align: middle;
}

section p img {
  margin-top: 25px;
}