Question

我尝试在容器DIV中居中（水平和垂直）中心文本和图像的串联。这是代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myBox {display:block; width:300px; height:100px;
              text-align:center; font-size:20px; line-height:500%;
              background-color:yellow;}
      #myImg {display:block; width:33.33%; height:100%;}
    </style>
  </head>
  <body>
    <div id="myBox">
      My text
      <img id="myImg" src="red100x100.jpg" />
    </div>
  </body>
</html>

文本确实居中，但图像显示在新行中。

试图实现这一点：
Delivery Pipeline

但我明白了：

编辑：

这类似于，但后者也处理保证金的影响：auto，而这个问题没有。

Answer 1

1）display:inline-block;使用#myImg。

2）使用vertical-align: middle;将文本垂直放置在中心。

#myImg {
    display:inline-block;
    vertical-align: middle;
    //Other code...
}

＆＃13;

#myBox {
  display:block;
  width:300px;
  height:100px;
  text-align:center;
  font-size:20px;
  background-color:yellow;
}

#myImg {
  display:inline-block;
  width:33.33%;
  height:100%;
  vertical-align: middle;
}

＆＃13;

<div id="myBox">
  My text
  <img id="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" />
</div>

＆＃13;

Answer 2

当图像呈现为块时，它会换行到下一行。您可以将其从块更改为内联，然后将另一个属性 - vertical-align - 设置为中间。

#myImg {
    display: inline;
    vertical-align: middle;
    width: 33.33%;
    height: 100%;
}

Codepen - https://codepen.io/sassquad/pen/GOqQxe

在DIV中居中文本和图像的组合

2 个答案: