Question

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

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

<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

职位：相对;

而不是绝对的 http://codepen.io/anon/pen/hsBux

<div style="font-family: Times; font-size: 12pt; width: 400px; position: relative; 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 2

我读过一篇关于此的文章。要完美地对齐块，请使用：

.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? 如果这是一个好主意。

中心文字和图片

2 个答案: