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

【问题标题】：Parent Class has "text-align:center" but child stays left-aligned父类具有“文本对齐：中心”，但子类保持左对齐
【发布时间】：2020-04-14 11:04:49
【问题描述】：

这里有 HTML 的 sn-p

   <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 仍然保持左对齐。

【问题讨论】：

inline-block 不是你的问题。移除 left 属性并添加 margin: auto。见这里：jsfiddle.net/75j02hd6/1

标签： html css flexbox alignment display

【解决方案1】：

将您的按钮包装在 html center 标签中：

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

或使用这种风格：

margin: 0 auto;
width: 7rem;

【讨论】：

虽然这可以回答问题，但修复后的代码示例更有用。

【解决方案2】：

对于这个问题，可能有所有其他人提供的各种解决方案。但我会让你知道，你必须从这里了解 CSS Flexbox 布局模块，如 display:flex 属性使用和 CSS 的特性： https://www.w3schools.com/css/css3_flexbox.asp

解决方案：

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

2- 只需将 align-items: center; 添加到类 .showcase-content 中，这将使所有子内容向中心对齐。

对于您的场景，Solution:2 肯定会帮助您。 祝你好运:)

【讨论】：

2 号完成了这项工作。谢谢！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

left 在你设置它之前不起作用 position: absolute;财产。但是，更好的方法是删除 left 属性并给出 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>

【讨论】：

【解决方案6】：

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

将代码“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;
}

【讨论】：