试图垂直对齐图像，但也浮动左边

Question

我试图创建一个垂直对齐的图像，但也有浮动左10px的填充。

这是我到目前为止有：

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

UPDATE：这样https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168

Answer 1

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 2

添加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 3

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

因此您需要登录align two divs horrizontaly。为此，你将需要使用display: inline-block为他们两个。通过使用这种方法，您需要将图像放入div中，并将文本放入另一个div中。

您还可以制作一个table，其中第一个td包含文本，第二个td包含图像。然后将table浮动到左侧。

Answer 4

你需要这样， 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/

Answer 5

尝试float:left在图像上，然后再添加一个div到img-container也飘然留下了一个合适的保证金

<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 6

为了达到预期的效果，您可以使用下面的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 7

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