如何在CSS中定位与父母相关的孩子？

Question

我正在使用HTML 5和CSS 3.场景是这样的。

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%">
<span>This text must be in center of div</span>
<a href="somepage.html"><img src="/image.jpg" alt="This image must be on left side of div"/></a>
</div>

文字和图片必须是单行。我该怎么做？

Answer 1

实施例

要根据父元素定位元素，您可以为父元素提供除static（通常为relative）和子position: absolute以外的任何位置值。

与内联CSS保持一致......

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%; text-align: center; position: relative;">
    This text must be in center of div
    <img src="/image.jpg" alt="This image must be on left side of div" style="position: absolute; left: 0;"/>
</div>

jsFiddle

但是，您应该考虑使用类，ID和外部样式表。

Answer 2

这个怎么样？我根据您的评论编辑了代码。需要注意的是，P标签的行高必须设置为div的高度，以使P垂直和水平居中。

    <style>
.myDiv{
    background-image: url('../pathToImage/image.jpg');
    background-repeat: no-repeat;
    background-position: center left;   
    margin-top: 50px; 
    background-color: red; 
    width: 100%;
    text-align: center;
    height: 250px;
}
.myDiv P
{
    line-height:250px;

}
</style>
<div class="myDiv">
        <p>This text must be in center of div.</p>
</div>

Answer 3

SPAN和IMG都是内联元素，因此默认情况下它们应该彼此相邻。如果您希望IMG显示在左侧，SPAN文本显示在它之后......

<img /><span />