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

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。它似乎是水平居中的。一旦图像向左浮动，我需要将一些文本浮动到图像的左侧。

更新：像这样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
    }

Answer 2

在图像上尝试float:left，然后在img-container 中添加一个div，同时向左浮动并留出适当的边距

<div class="img-container">
  <img src="http://placehold.it/75x75" alt="" style="float:left;"/>
  <div style="float:left;margin-left:10px;">Your Content</div>
</div>

Answer 3

为了达到你想要的效果，你可以使用下面的CSS代码：

/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);

1. 设置top: 50% 和transform: translate(..., -50%) 将使您的元素垂直居中。
2. 设置left: 0 和transform: translate(0, ...) 将使您的元素水平向左浮动。

对于光学参考，您可以在this fiddle 中查看我的代码工作。

Answer 4

<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="img-container-2">
<div class="img-cell">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>  
</div>
<div class="footer">&nbsp;</div>
</div>
<style type="text/css">
.content {height:300px; background-color:rgb(239, 65, 59);}
.header {height:60px; background-color:rgb(55, 102, 199);}
.img-container-2 {display:table; height:100%; width:100%; text-align:left;}
.img-cell {display:table-cell; vertical-align:middle;}
.headliner {padding:10px; height:50px;}
.footer {height:40px; background-color:rgb(66, 199, 123);}
</style>

Answer 5

img-container 文字左对齐；

  text-align: left;

这里是代码

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

Answer 6

一旦图像向左浮动，我需要将一些文本浮动到图像的左侧。

所以你需要align two divs horrizontaly。为此，您需要对它们都使用display: inline-block。通过使用这种方法，您需要将图像放在一个 div 中，而将文本放在另一个 div 中。

您还可以创建一个table，第一个td 包含文本，第二个td 包含图像。然后将table 向左浮动。

Answer 7

你需要这样吗， html代码：

    <div class="container">
      <div class="header">
        <div  class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</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="footer">sdfsd</div>
    </div>

    css:
    .content {
        height: 100px;
        position: relative;
        width: 100%;
        border: 1px solid black;
        background-color: rgb(239, 65, 59);
    }

    .header {
        height: 60px;
        background-color: rgb(55, 102, 199);
    }

    .dummy {
        padding-top: 100%; /* forces 1:1 aspect ratio */
    }

    .img-container {
    position: absolute;
      top: 10px;
      bottom: 0;
      left: 10px;
      right: 0;
      text-align: left;
    }
    .img-container:before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .img-container img {
        vertical-align: middle;
        display: inline-block;
    }



    .headliner {
      padding:10px;
      height:50px;
    }
    .footer {
        height: 40px;
        padding-bottom: 0px;
        padding-left: 5px;
        padding-top: 5px;
        background-color: rgb(66, 199, 123);
        text-align: left;
    }

你可以参考一个链接：https://jsfiddle.net/vpbu7vxu/5/