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/