父类具有“ text-align：center”，但子代保持左对齐

Question

这里有HTML的摘要

   <header id="showcase">
        <div class="showcase-content">
            <h1>The Sky Is The Limit</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore facere adipisci corporis molestiae voluptatum natus.</p>
            <a class = " readmore"href="#what">Read more</a>
        </div>

    </header>

下面是它的CSS

#showcase .showcase-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 100%;
    padding: 4rem;
    /* Overlay */
    background-color: rgba(0,0,0,0.5);
}

.readmore{
    display: inline-block;
    width: 7rem;
    color:white;
    background: #93cb52;
    left: 50%; 
}

问题是readmore类的显示被覆盖：inline-block;并且。showcase-content类具有text-align：center;但是readmore仍然保持左对齐。

Answer 1

只需对您的代码进行一些更改：

将代码“ dislay：flex”更改为“ display：block”。

Refer Here谢谢

#showcase .showcase-content{
display: block;
flex-direction: column;
text-align: center;
justify-content: center;
height: 100%;
padding: 4rem;
/* Overlay */
background-color: rgba(0,0,0,0.5);
}

.readmore{
display:inline-block;
width: 7rem;
color:white;
background: #93cb52;
}

Answer 2

左在您将其设置为绝对位置之前不起作用。属性。但是，更好的方法是删除左属性并给保证金：auto;看到这里，

#showcase .showcase-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 100%;
    padding: 4rem;
    /* Overlay */
    background-color: rgba(0,0,0,0.5);
}

.readmore{
    display: inline-block;
    width: 7rem;
    color:white;
    background: #93cb52;
   margin: auto;
}

 <header id="showcase">
        <div class="showcase-content">
            <h1>The Sky Is The Limit</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore facere adipisci corporis molestiae voluptatum natus.</p>
            <a class = " readmore"href="#what">Read more</a>
        </div>
    </header>

Answer 3

<header id="showcase">
        <div class="showcase-content">
            <h1>The Sky Is The Limit</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore facere adipisci corporis molestiae voluptatum natus.</p>
          <p>  <a class = " readmore"href="#what">Read more</a></p>
        </div>
    </header>

只需添加一个段落标签即可

Answer 4

将margin: auto设置为按钮。您为按钮指定了一个特定的宽度，该宽度不包含行的全部宽度。而且您给左撇子不适用，因为您可以给左，右，上，下属性加上位置。因此，左键不起作用。

#showcase .showcase-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 100%;
    padding: 4rem;
    /* Overlay */
    background-color: rgba(0,0,0,0.5);
}

.readmore{
    display: inline-block;
    width: 7rem;
    color:white;
    background: #93cb52;
    margin: auto;
}

 <header id="showcase">
        <div class="showcase-content">
            <h1>The Sky Is The Limit</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore facere adipisci corporis molestiae voluptatum natus.</p>
            <a class = " readmore"href="#what">Read more</a>
        </div>
    </header>

Answer 5

[其他人可能针对此问题提供了各种解决方案。但是，我将通知您，您必须从此处了解

CSS Flexbox布局模块，例如display:flex属性的使用和CSS功能：https://www.w3schools.com/css/css3_flexbox.asp

解决方案：

1-只需从CSS类中删除display:flex;行即可。 （不显示：flex;）

2-

只需将align-items: center;添加到类.showcase-content中，这会将所有子内容对准中心。对于您的情况，解决方案：2肯定会为您提供帮助。

祝你好运：）

Answer 6

要么将按钮包装在html center标签中：

<center><a class=" readmore" href="#what">Read more button</a></center>

或使用此样式：
margin: 0 auto;
width: 7rem;