Question

我正在尝试将一些文本居中在div中，文本框浮动到右侧。没有文本框，一切看起来都很好。虽然添加时，文本框会抵消标题的居中。

无论如何，尽管有另一个元素，仍然保持标题居中？这是小提琴 http://jsfiddle.net/poppypoop/WqrXF/

<div style="width: 100%; height: 30px; text-align: center; background-color: lightgray; padding-top: 5px;">
Title Here
<input type="text" style="float: right;" />

Answer 1

不要将输入浮动，而是将其定位为absolute。这将要求它的容器也有一个位置，因此请relative

http://jsfiddle.net/rr2WW/

<div style="width: 100%; height: 30px; text-align: center; background-color: lightgray; padding-top: 5px; position: relative;">
    Title Here
    <input type="text" style="position: absolute; right: 0;" />
</div>

Answer 2

为您的文字字段添加一组width和一个margin-left，其等于其width的否定：

<div style="width: 100%; height: 30px; text-align: center; background-color: lightgray; padding-top: 5px;">
    Title Here
    <input type="text" style="float: right;  width: 120px; margin-left: -120px;" />
</div>

请参阅DEMO。

CSS使用其他元素将div中的文本居中

2 个答案: