Родительский класс имеет «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 имеет переопределенныйотображать: встроенный блок;и .showcase-content класс имеет выравнивание текста: по центру ;но readmore по-прежнему остается выровненным по левому краю.

Answer 1

Могут быть различные решения, предоставленные всеми остальными для этой проблемы. Но я дам вам знать, что вы должны понимать, что CSS Flexbox Layout Module like display:flex использует свойства и особенности CSS здесь: https://www.w3schools.com/css/css3_flexbox.asp

Решения:

1- Просто удалите display:flex; строку из класса css. (без дисплея: гибкий;)

2- Просто добавьте align-items: center; в класс .showcase-content, который выровняет весь дочерний контент по центру.

Для вашего сценария Solution: 2 определенно поможетвы. Удачи:)

Answer 2

Оберните вашу кнопку в тег html center:

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

или используйте этот стиль:

margin: 0 auto;
width: 7rem;

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

left не работает, пока вы не установите его положение: absolute;свойство. но лучший способ - удалить левое свойство и указать поле: 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>