Question

我想将左对齐文本居中在黄色框（txtbox）中。现在看起来像这样：

它希望它看起来像这样：

HTML：

       <div class="content container small">
                    <div class="txtbox">
                        <header style="text-align:left;">
                            <h2>I AIN'T</h2>
                            <h2>AN ARTIST.<h2>
                            <h2>I'M A</h2>
                            <h2>BEAST!</h2>
                        </header>
                    </div>
                <footer>
                    <a href="#one" class="button style2 down">More</a>
                </footer>
        </div>

CSS：

.container.small {
    /* width: (containers) * 0.75; */
    width: 900px;
}
.txtbox{
    width:800px;
    margin:0 auto;
    background-color:yellow;
    text-align:center;
}

Answer 1

.txtbox header h2{
    padding-left: 50px;
}

Answer 2

.txtbox header {
    display: grid;
    grid-template-columns: 1fr; 
    width: fit-content;
    margin: auto;
    background-color: yellow;
    text-align: left;
    align-items: center;
}

这会将您的文本放在一个框中。将文本对准框的左侧，并使框适合您所拥有的文本。然后它将居中。当您不知道宽度或高度时，此方法也适用。

然后删除

style="text-align:left;"

超出标题。

Answer 3

摆脱

中的内联风格

<header style="text-align:left;">

它会覆盖样式表;离开

<header>

Answer 4

header h2 { position: relative; left : 30% /* percentage of yellow box */; }

Answer 5

我花了一点时间才弄清楚＆＃34;居中左对齐＆＃34;文字意思。

如果我理解正确，您希望文本在垂直轴上左对齐，但在页面上居中。

如果这是您想要的，那么您可以通过将内部标题标记居中来实现这一点：width: 132px; margin: 0 auto;

这是一个演示的小提琴： http://jsfiddle.net/u4sj7/

Answer 6

                <div class="txtbox">
                  <div class="centerblock">
                    <header style="text-align:left;">
                        <h2>I AIN'T</h2>
                        <h2>AN ARTIST.<h2>
                        <h2>I'M A</h2>
                        <h2>BEAST!</h2>
                    </header>
                  </div>
                </div>

CSS：

.centerblock {
    display:inline-block;
    margin:auto;
}

Answer 7

HTML：

<div class="content container small">
    <div class="txtbox">
        <header>
             <h2>I AIN'T</h2>
             <h2>AN ARTIST.</h2>
             <h2>I'M A</h2>
             <h2>BEAST!</h2>
        </header>
    </div>
    <footer> <a href="#one" class="button style2 down">More</a>

    </footer>
</div>

将此添加到CSS：

.txtbox header {
    display: block;
    margin: 0 auto;
}

居中左对齐文本

7 个答案: