I can not center horizontally a div child of a container div with flexbox

Question

I can not center horizontally a div child of a container div with flexbox

Navigation

#1 by (2 votes)

2

I can not horizontally cen a div with flexbox. I have a half 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 (is out of the mediaquery)

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

}

I'm seeing many tutorials but it's not clear 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 do not know if there is any code 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 not center .discox

html5 html css3 css

asked by Rafael Hernández 26.09.2016 в 16:38

source

1 answer

Problems with printing select with each Arduino - Error erasing EEPROM memory in MEGA

score 2 · Accepted Answer

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

Regarding the explanation of the 3 lines that you mention:

justify-content:center; is applied to the flex container, it serves to align the elements in the main axis defined by the flex-direction property. In this case, it will center the elements vertically.
flex-direction:column; applies to the container and determines the main axis, in this case it is a top-down column.
align-content: center; is applied to the container and what it does is to align the lines of content when there is additional space in the main axis, in this case what it would do if there were more than one line (column) of content, it would be to join those lines in the center (horizontal). It only works if there is more than one content line.