1

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

#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>

我不想绝对定位正确的文本，因为居中的文本可能会与它重叠。居中的文本应该在点击正确的文本之前改为自动换行，并且仍然水平居中。

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

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

4

2 回答 2

0

所以，推荐了一个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/

于 2013-03-01T22:41:36.087 回答
0 
#center_text {
    text-align:center;
    float:left;
}
于 2013-02-28T00:51:46.610 回答