css - 在居中元素的左侧放置一些东西？

Question

图片显示了我想要实现的目标。可以做到吗？

对于居中，没有把东西放在左边的部分，见这里：How do I center float elements?

Answer 1

是的！这可以通过绝对定位来实现，如果你对你所做的事情小心的话。

首先，制作一个包装器<div>，居中文本<div>，包含一个子（左定位）<div>。

<div class='wrapper'>
    <div class='centered'>
        This text is horizontally centered.
        <div class='left'>
            This text is to the left of the centered text.
        </div>
    </div>
</div>

然后，将包装器的text-align设置为center：

.wrapper {
    text-align: center;
}

设置居中文本display: inline-block和position: relative：

.centered {
    display: inline-block;
    position: relative;
}

最后，将左侧文本绝对定位为right: 100%：

.left {
    position: absolute;
    right: 100%;
    width: 100px;
    top: 0;
}

这是 JSFiddle：http://jsfiddle.net/jeremyblalock/28q08auq/1/