Question

我的h2元素下面有一行。

它是左对齐的，但我想将它对齐在文本正下方。

有人可以帮忙解决这个问题吗？

h2 {
  display:block
}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    margin-top: 10px;
    width: 50px;
}

<h2 class="text-center">Welcome to our Website</h2>

Answer 1

试试这个

h2 {
    display: inline-block;
    position:relative;
}
h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position:absolute;
}

Answer 2

最好的办法是在父母和父母身上使用display: inline-block。关于孩子的margin: auto。

＆＃13;

h2 {
  display:inline-block
}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    margin: 10px auto 0 auto;
}

＆＃13;

<h2 class="text-center">Welcome to our Website</h2>

＆＃13;

Answer 3

或者，您可以设置controllerFor和left: 50%;

，而不是按照他人的建议使用保证金。

当您无法使用保证金时，或者由于其他原因设置保证金时，这种居中方法可以派上用场。

transform: translateX(-50%);

h2 {
    display: inline-block;
    position:relative;
}
h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    width: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Answer 4

试试这个：

h2 {
  display:inline-block;

}

h2:after {
    border-bottom: 4px solid #ae263d;
    content: "";
    display: block;
    margin-top: 10px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}

Answer 5

针对此问题试用此代码

＆＃13;

h2 {
        display: block;
        text-align: center;
    }
    
    h2:after {
        border-bottom: 4px solid #ae263d;
        content: "";
        display: block;
        margin: 10px auto 0px auto;
        width: 50px;
    }

＆＃13;

<h2 class="text-center">Welcome to our Website</h2>

＆＃13;

中心对齐文本下方的行

5 个答案: