html - 居中文字和图片

Question

我试图将页面中的一段文本居中，并将水平和垂直居中的图像放在文本 block 中。我不想使用背景图像。

这是我得到的，但根本不起作用。

<div style="font-family: Times; font-size: 12pt; width: 400px; position: absolute; z-index:20; margin-left:auto; margin-right:auto; top: 50px;">
    <img style="position: absolute; z-index:1; top: 20px; margin-left:auto; margin-right:auto;" src="MyImage.jpg" width="202" height="267" />
        <strong>This is my Text. Blah Blah Blah Blah Blah Blah
        <br />
        Blah Blah Blah Blah Blah Blah
        <br />
        Retrieved from:<br />
        Blah Blah Blah Blah Blah Blah
        <br />
        Blah Blah Blah Blah Blah Blah
        <br />
</div>

Answer 1

我读过一篇关于这个的文章。要完美对齐 block ，请使用:

.Center-Container {
  position: relative;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

这些CSS样式是关键!在这里查看:

div {
  font-family: Times;
  font-size: 12pt;
  width: 400px;
  height: 200px;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  background-color: red;
}
p {
  position: relative;
}
img {
  z-index: 1;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div>

  <p>
    B lah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

    <br />
    <img src="MyImage.jpg" width="50" height="50" />
  </p>

</div>

您可以在此处阅读相关信息

http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

编辑

img 标签现在位于 p 标签中。你可以在这里查看Should I put paragraph tags around images?如果那是个好主意。