html - 尝试垂直对齐图像但也将其向左浮动

Question

我试图创建一个垂直对齐的图像，但也让它向左浮动并留有 10 像素的内边距。

这是我目前所拥有的:

<div class="container">
  <div class="header">
      <div class="headliner"><strong>blaw</strong>
      <br />blah</div>
      <div class="header_eta"></div>
  </div>

  <div class="content">
    <div class="dummy"></div>

    <div class="img-container">
      <img src="http://placehold.it/75x75" alt="" />
    </div>    
  </div>

  <div class="footers"></div>
</div>

您还可以查看 this fiddle .

我似乎无法将 img 设置为 float: left。它似乎水平居中。一旦我让图像向左浮动，我需要将一些文本 float 到图像的左侧。

更新:像这样的东西 https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168

Answer 1

添加 text-align:left 到 img-container 和 padding-left:10px;

像这样:

   .img-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align:left; /* Align center inline elements */
        font: 0/0 a;
        padding-left:10px
    }