父類具有“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類有一個被覆蓋的 display:inline-block; 和.showcase-content類有text-align:center ； 但readmore仍然保持左對齊。

Answer 1

只需對您的代碼進行一些更改：

將代碼“dislay:flex”更改為“display:block”。

參考這里謝謝

#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

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>

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設置為按鈕。 您為按鈕指定了一個特定的寬度，該寬度不包含該行的全寬。 你給了 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>

Answer 5

對於這個問題，可能有所有其他人提供的各種解決方案。 但我會讓你知道你必須從這里了解CSS Flexbox 布局模塊，如display:flex property uses & features of CSS： https display:flex //www.w3schools.com/css/css3_flexbox.asp

解決方案：

1-只需移除display:flex; 行形成 css 類。 （沒有顯示：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;