1

No puedo centar horizontalmente un div con flexbox. tengo un media query para pantallas de móviles

@media only screen and ( max-width: 479px )
{
.filadisco1
{

display: flex;
width:280px;
justify-content:center;
flex-direction:column;
align-content: center;
padding:0;


}
}

hijo de .filadisco1 (esta fuera del mediaquery)

.discox
{
width: 250px;
height: 420px;
margin-top: 34px;
background-color: #212f31;

}

Estoy viendo muchos tutoriales pero no me queda claro donde poner:

justify-content:center;
flex-direction:column;
align-content: center;

Si en el contenedor o en los hijos, la plantilla que uso es comprada y no se si hay algún código de la misma que me este interfiriendo en centrar .discox

html:

<div id="content-area">
<div class="container clearfix">
<div id="main-area">


<h1 class="tituloseccion alineacionh1h2">Discografía</h1>

<div class="filadisco1">

<div class="discox">
<a class="ablanco" href="la-desvirtualizacion-de-las-ideas/"><img     class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco5.jpg"</></a>
<p class="parrafodisco">La Desvirtualización de las ideas(2015)</p>
<p class="parrafodescrip"> La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación [...]</p>
</div><!-- discox->

</div><!-- filadisco1->

</div> <!-- #main-area -->

</div> <!-- .container -->
</div> <!-- #content-area -->

No consigo centrar .discox

1 respuesta 1

2

La propiedad que necesitas para centrar horizontalmente en este caso es align-items en vez de align-content:

@media only screen and ( max-width: 479px ) {
  .filadisco1 {
    display: flex;
    width: 280px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding:0;
  }
}

.discox {
  width: 250px;
  height: 420px;
  margin-top: 34px;
  background-color: #212f31;
}
<div id="content-area">
  <div class="container clearfix">
    <div id="main-area">
      <h1 class="tituloseccion alineacionh1h2">Discografía</h1>
        <div class="filadisco1">
          <div class="discox">
            <a class="ablanco" href="la-desvirtualizacion-de-las-ideas/"><img class="imgdiscosx" src=""/></a>
            <p class="parrafodisco">La Desvirtualización de las ideas(2015)</p>
            <p class="parrafodescrip"> La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación [...]</p>
          </div><!-- discox-->
       </div><!-- filadisco1-->
     </div> <!-- #main-area -->
  </div> <!-- .container -->
</div> <!-- #content-area -->


En cuanto a la explicación de las 3 líneas que mencionas:

  • justify-content:center; se aplica al contenedor flex, sirve para alinear los elementos en el eje principal definido por la propiedad flex-direction. En este caso va a centrar los elementos de forma vertical.
  • flex-direction:column; se aplica al contenedor y determina el eje principal, en este caso es una columna de arriba hacia abajo.
  • align-content: center; se aplica al contenedor y lo que hace es alinear las líneas de contenido cuando hay espacio adicional en el eje NO principal, en este caso lo que haría si hubiese más de una línea (columna) de contenido, sería juntar dichas líneas en el centro (horizontal). Solo funciona si hay más de una línea de contenido.

Tu Respuesta

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

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