中心文本和图像

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

这是我得到的，但根本没有工作。

<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>

来源

2014-09-27 Rick

你想要图像在文本后面，对吧？ – afaolek 2014-09-27 14:14:52

是的。文字背后的图像。 – Rick 2014-09-27 14:16:39

我读过这篇文章。要完美地对齐块使用：

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

来源

2014-09-27 14:19:14

文字居中，但图像不是。我希望图像在文本中居中。 – Rick 2014-09-27 14:23:38

这是你在找什么？我编辑了片段 – 2014-09-27 14:31:04

是的。非常好。 – Rick 2014-09-28 00:38:07

position：relative;

，而不是绝对 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>

来源

2014-09-27 14:14:25 DDaems

图像位于文本的左边缘。我希望它从文本块水平和垂直居中。 – Rick 2014-09-27 14:19:13

对不起，没有正确阅读。这似乎是答案2应该做的工作。 Goodluck – DDaems 2014-09-27 14:23:23

中心文本和图像

回答

相关问题