Question

我在div中定位文本时遇到问题。我希望图像在右上角（我能够做到）和文本类型的中心底部文本在框中。

这是我想要做的一个例子：http://jsfiddle.net/Lucky500/Nq769/

我创建了一个div .bottom_box并添加了：

   .bottom_box {
      position: relative;
      bottom: -50px;
      left: 50px;
    }

有更简单或更正确的方法吗？

Answer 1

好的 -

在
和元素中添加了text-align：center。
将您的outer_box位置设置为relative。
将img值设置为绝对值，并使用0.25 em顶部和右侧而不是边距定位。

http://jsfiddle.net/mr_mayers/Nq769/2/

.outer_box {
    border: solid #6ac5ac 3px;
    display: inline-block;
    width: 250px;
    height: 200px;
    margin: .5em;
    Position: relative;
}

.bottom_box {
    position: relative;
    bottom: -50px;
}

p {
    color: blue;
    text-align: center;
}

img {
    position: absolute;
    padding: 3px;
    top: 0.25em;
    right: 0.25em;
}


h1 {
    text-align: center;
    color: red;
}

Answer 2

您可以按如下方式实现布局：

对于这个HTML：

<div class="outer_box">
    <img src="http://placehold.it/100x50">
    <div class="bottom_box">
            <h1>$25 OFF</h1>
        <p>$25 off your first cleaning!</p>
    </div>
</div>

尝试以下CSS：

.outer_box {
    border: solid #6ac5ac 3px;
    display: inline-block;
    width: 250px;
    height: 200px;
    margin: 0.5em;
}
.bottom_box {
    clear: both;
    border: 1px dotted gray; /* for demo only, optional */
}
img {
    float: right;
    padding: 3px;
    margin: 0 0 1em 1em;
}
p {
    color: blue;
    margin-left: 50px;
}
h1 {
    color: red;
    margin-left: 50px;
}

由于您的图片已浮动，只需清除.bottom-box。

即可

对子元素使用margin-left以获取任何空格。

参见示例：http://jsfiddle.net/audetwebdesign/3SjRG/

如果您将text-align: center和p内容集中在一起，则可以使用h1，但我不确定您是否希望在文本块上使用粗糙的左对齐或粗糙的右对齐;

Answer 3

您最好使用text-align:center和position: absolute

参见 example

Answer 4

有一些解决方案。

另一种方法是使框相对并将文本和图像定位在绝对值内。

Answer 5

我会为你的盒子创建一个带边框的容器div，然后将内部div（一个带有你的图像，一个带你的文字）设置为绝对位置。然后你可以使用top：0;右：0;对于右上角的图片。底部：xx;左：yy;用于定位文本div。

这与您使用的方法不同。如果它有效，在任何情况下都不会破坏，并且很简单，那么它是正确的。许多方法可以让猫在编程中变形。

无法在框内定位文本

5 个答案: