Question

是否可以将居中文本放在只有左边距的div中？基本上是根据黑匣子对齐文本，但不要超出红框。

一种解决方案是放置text-indent: -25%，但是当我们调整窗口大小并使其缩小时，文本的某些部分将被隐藏。

有什么想法吗？

更新：我希望文本以黑框为中心，但不要超出红框。我不希望任何边距/填充到正确的

Answer 1

用于伪元素

:after

写下此css

h1 {
    display:block;
    position:relative;
    background: red;
    height: 100px;
    line-height: 100px;
    margin: 0 0 0 0;
    font-size: 2em;
}

h1:after{
content:'';
    left:0;
    top:0;
    bottom:0;
    width:25%;
    position:absolute;
    background:#000;
}

的 Live Demo 的

有关 this
的更多信息
的 About Pseudo-elements 的

Answer 2

我并不完全明白你想要做什么，但是margin-left: auto; margin-right: auto;可以解决问题。

http://jsfiddle.net/j8CYE/14/

Answer 3

查看此FIDDLE

首先设置div宽度，然后将h2设为width: inherit

带有边距的CSS居中文本

3 个答案: