时间戳

首页 > 解决方案 > 父类具有“文本对齐：中心”，但子类保持左对齐

html - 父类具有“文本对齐：中心”，但子类保持左对齐

问题描述

这里我有 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类有一个被覆盖的 display:inline-block; 并且.showcase-content类有text-align:center；但readmore仍然保持左对齐。

标签： htmlcssflexboxalignmentdisplay

解决方案

设置margin: auto为按钮。您为不包含行全宽的按钮指定了特定宽度。而且你给了left not apply，因为你可以给left、right、top、bottom属性加上位置。所以，左不工作。

#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>

推荐阅读