0

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

jdog
  • 10,351
  • 29
  • 90
  • 165
  • Can you please provide more clarity on the desired layout, ideally an image or similar of expected output to compare against. This is especially important as you have failed to state browser version so for all I know in Chrome 51.0.2704.103 its working fine, i cant tell from this description. http://stackoverflow.com/help/how-to-ask – Daniel Brose Jun 28 '16 at 06:20
  • Something like this. https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168 – jdog Jun 28 '16 at 13:42

7 Answers7

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
    }
Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
1

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>
James Walker
  • 390
  • 4
  • 19
  • Combining yours James and Suvendu I have what I need. https://jsfiddle.net/vpbu7vxu/7/ – jdog Jun 28 '16 at 13:49
1

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%);
  1. Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
  2. 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.

Angel Politis
  • 10,955
  • 14
  • 48
  • 66
1
<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>
Suvendu Paul
  • 5
  • 2
  • Suvendu, combining yours and James I have what I need. Thank you! https://jsfiddle.net/vpbu7vxu/7/ – jdog Jun 28 '16 at 13:50
0

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;
}
Gautam Jha
  • 1,445
  • 1
  • 15
  • 24
0

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.

Community
  • 1
  • 1
meJustAndrew
  • 6,011
  • 8
  • 50
  • 76
0

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/

Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
SMS
  • 84
  • 5