試圖垂直對齊圖像，但也浮動左邊

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>