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/