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/