Trying to align an image vertically but also float it left - html

Question

I'm trying to create a vertically aligned image, but also have it float left with a 10px padding.
Here is what I have so far:
<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>
You can also check out this fiddle.
I can't seem to get the img to float: left. It seems to be centered horizontally. Once the I get the image floated left, I need to float some text to the left side of the image.
UPDATE: Something like this https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168

Answer 1

Add text-align:left into img-container with padding-left:10px;
Like this:
.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

try float:lefton the image, then add a div into img-container also floated left with a suitable margin
<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

In order to achieve your desired result, you can use the following CSS code:
/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
Setting left: 0 and transform: translate(0, ...) will float your element horizontally to the left.
For optical reference you can check my code work in 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"> </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 to left;
text-align: left;
here you code
.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

Once the I get the image floated left I need to float some text to the left side of the image.
So you will need to align two divs horrizontaly. For this you will need to use display: inline-block for both of them. By using this approach, you will need to put the image inside a div, and the text inside another div.
You could also make a table with the first td containing the text and the second td containing the image. Then float table to left.

Answer 7

Do you need like this,
Html code:
<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;
}
you can refer a link:https://jsfiddle.net/vpbu7vxu/5/