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

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

Answer 1

使用layout.addView(view,index);

将text-align:left添加到img-container

像这样：

padding-left:10px;

Answer 2

在图片上尝试float:left，然后在img-container中添加一个div，左边还有一个合适的边距

<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

为了达到理想的效果，您可以使用以下CSS代码：

/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);

设置top: 50%和transform: translate(..., -50%)会使您的元素垂直居中。
设置left: 0和transform: translate(0, ...)会将元素水平浮动到左侧。

对于光学参考，您可以在this fiddle中查看我的代码。

Answer 4

filter_value = 0.1 * np.random.randn(3, 3, 64, 64)
filter_value[1, 1, :, :] = 1.  # set the center value to 1.

filter = tf.Variable(filter_value, dtype=tf.float32)

Answer 5

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 6

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

所以你需要align two divs horrizontaly。为此，您需要对它们使用display: inline-block。通过使用这种方法，您需要将图像放在div中，将文本放在另一个div中。

您还可以制作table，其中第一个td包含文字，第二个td包含图片。然后将table向左浮动。

Answer 7

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

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

7 个答案: