Question

我有一个容器，右边有一些文本浮动，而我想要的其他文本相对于整个容器水平居中。下面的代码仅将文本相对于浮动文本左侧的空间居中。容器的宽度可能因屏幕大小而异，并且居中和右侧文本都是动态的，可以包含更多或更少的字符。

#holder {
    margin:15px;
    padding:15px;
    background-color:#000;
    color:#fff;
}
#right_text {
    float:right;
}
#center_text {
    text-align:center;
}
<div id="holder">
    <div id="right_text">back to page 3</div>
    <div id="center_text">load results 10-30 of 312</div>
</div>

我不想绝对定位正确的文字，因为居中的文字可能会重叠。在点击正确的文本之前，居中的文本应该是wordwrap，并且仍然是水平居中。

我不想将左/右填充添加到居中的文本容器中，因为正确的文本是动态的，我不知道所需的填充量。

http://jsfiddle.net/eJFw6/8/

Answer 1

#center_text {
    text-align:center;
    float:left;
}

Answer 2

因此，建议使用javascript解决方案，我想出了这个：

$(document).ready(function() {
    $("#center_text").css('padding','0px '+$("#right_text").outerWidth()+'px');
});

我还在右侧文本中添加了一些左侧和底部填充，因此如果容器更加紧凑，则中心文本会很好地包装。

#holder {
    margin:15px auto;
    padding:15px;
    background-color:#000;
    color:#fff;
    width:280px
}
#right_text {
    float:right;
    padding-left:15px;
    padding-bottom:50px;
}
#center_text {
    text-align:center;
}
<div id="holder">
    <div id="right_text">back to page 3</div>
    <div id="center_text">load results 10-30 of 312</div>
</div>

http://jsfiddle.net/littleRoom/eJFw6/12/

如何在浮动旁边水平准确地居中文本

2 个答案: