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

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>

文字确实居中，但图片换行。

正在努力实现：

但我明白了：

编辑：

这类似于，但后者也涉及margin:auto的效果，而本题则没有。

Answer 1

1) display:inline-block; 用于 #myImg.

2) 使用 vertical-align: middle; 将文本垂直居中。

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

#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;
}

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

Answer 2

由于图像被渲染为一个块，它换行到下一行。您可以将它的显示从块更改为内联，然后将另一个属性 - vertical-align - 设置为中间。

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

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

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

Center a combination of text and image within a DIV

html

css

image

centering