Home / Questions / 25072
Accepted
Rafael Hernández
Asked: 2020-09-27 06:38:06 +0800 CST 2020-09-27 06:38:06 +0800 CST

I can't horizontally center a child <div> of a container <div> with flexbox

  • 772

I can't horizontally center a div with flexbox. I have a media query for mobile screens

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

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


}
}

son of .filadisco1 (it is outside the mediaquery)

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

}

I am seeing many tutorials but it is not clear to me where to put:

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

If in the container or in the children, the template I use is purchased and I don't know if there is any code in it that is interfering with centering .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 -->

I can't center .discox

html

1 Answers

  1. Best Answer

    The property you need to center horizontally in this case is align-itemsinstead of 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 -->

    As for the explanation of the 3 lines you mention:

    • justify-content:center;is applied to the flex container, it is used to align the elements on the main axis defined by the property flex-direction. In this case you will center the elements vertically.
    • flex-direction:column;is applied to the container and determines the main axis, in this case it is a column from top to bottom.
    • align-content: center;is applied to the container and what it does is align the lines of content when there is additional space in the NOT main axis, in this case what it would do if there was more than one line (column) of content, would be to join these lines in the center ( horizontal). It only works if there is more than one line of content.
    • 2