1

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?

Cómo queda: Al centrar el contenedor horizontalmente el titulo tambien se cnetra

Cómo quiero que quede: introducir la descripción de la imagen aquí

´    <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;
}´

1 respuesta 1

0

(Editado1)

Para lograr lo que quieres, más que CSS, creo que puedes alterar la estructura metiendo un <div> adicional que contenga el div de las noticias, que automáticamente se ajustará al ancho de este, y el título quedará automáticamente alineado a la izquierda de esta sección, y no de la <section>.

.section-documentary-news {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-documentary-news {
    display: flex;
}
<section class="section-documentary-news">
  <div class="added-container">
    <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>
  </div>
</section>


Respuesta original

Puedes darle a ese título un ancho del 100%, con lo que automáticamente se alineará a la izquierda del contenedor, en este caso, de la <section>, por ejemplo:

.section-documentary-news {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-documentary-news {
    display: flex;
}

section > h2 {
  width: 100%;
}
<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>


1: Luego de leer el comentario que quedó sobre esta respuesta y de re-leer la pregunta, he editado la respuesta para que quede como espera el AP.

3
  • Lo quería en la parte superior del contenedor, del lado izquierdo como en la segunda imagen que compartí, le puse un width: 67.5%; y funciono. No sabía del uso de >. Gracias!!! Commented el 13 may. a las 23:03
  • @Zuniga edité la respuesta con una mejor solución.
    – jachguate
    Commented el 14 may. a las 0:03
  • 1
    ¡Muchísimas gracias! Lo he probado en un nuevo proyecto y no tuve problema. Se adapta al tamaño de la pantalla. Gracias a tu respuesta, ya entiendo qué debo tener en cuenta y cómo funciona. Commented el 19 may. a las 21:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.