css - CSS 将 div 中的文本与其他元素居中

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>

见演示。