Estoy trabajando en un diseño donde tengo un contenedor <section>
con la clase "section-documentary-news". Dentro de este contenedor, tengo un título <h2>
que dice "Latest News" seguido de un conjunto de elementos con la clase "container-documentary-news".
Mi objetivo es asegurarme de que el título "Latest News" permanezca en la parte superior del contenedor y alineado a la izquierda, mientras que los elementos dentro del contenedor se muestran en columnas debajo de él. He utilizado display: flex;
junto con flex-direction: column;
para lograr este diseño. Sin embargo, al intentar centrar el contenedor horizontalmente con align-items: center;
, el título también se centra, lo cual no es mi intención. He utilizado otras propiedades como text-align: left;
o margin: 0 auto;
pero nada a funcionado.
Quiero que el título "Latest News" se mantenga en la parte superior y alineado a la izquierda, mientras que los elementos dentro del contenedor se alinean en columnas debajo de él. ¿Cómo puedo lograr esto sin que el título se centre al centrar el contenedor horizontalmente?
´ <section class="section-documentary-news">
<h2>Latest News</h2>
<div class="container-documentary-news">
<div class="latestNews">
<img src="https://www.blender.org/wp-content/uploads/2024/03/blenderheads_ep05_thumbnail_small.jpg" alt="" width="480">
<h1>DOCUMENTARY</h1>
<p>BLENDERHEADS ep. 05</p>
</div>
<div class="latestNews">
<img src="https://www.blender.org/wp-content/uploads/2024/01/blender_30_years_team.jpg" alt="" width="480">
<h2>DOCUMENTARY</h2>
<p>BLENDERHEADS ep. 05</p>
</div>
</div>
</section>´
´.section-documentary-news {
display: flex;
flex-direction: column;
align-items: center;
}
.container-documentary-news {
display: flex;
}´