当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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

网友答案:

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
    }
网友答案:

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>
网友答案:

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.

网友答案:
<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>
网友答案:

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;
}
网友答案:

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.

网友答案:

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/

分享给朋友:
您可能感兴趣的文章:
随机阅读: