Skip to main content
broomeGirl
broomeGirl
Inspiring
October 5, 2022
Answered

Centre not working

Hi everyone would really appreciate some insight as to why this code is not working.

See screenshot.  Thanks 🙂

 

<!--Center Everything Start-->

<div class="center">
<h2 class="smallerh2Centre" >Nine-bot Segway Scooter</h2>
<br>
<img src="images/scooters/Ninebot-E-Scooter-500.png" width="419" height="445" alt="Sunrise E-Scooter" class="img-responsive" />
<h3 class="lowerCase" >Just what you need for that Cable Beach sunset!</h3>
<h4 class="lowerCase">From $50 per day (24 hours)</h4>
</div>
<!--Center Everything End-->

 

THE CSS

.center {
height: 500px;
display: flex;
align-items: center;
justify-content: center;}

    This topic is closed to new replies. Start a new post to keep the conversation going.
    BenPleysier
    BenPleysierCorrect answer
    Community Expert
    October 5, 2022

    Flexbox is a single dimension layout element. It can be either in a  horizontal or a vertical vertical direction. The default is horiontal. To change it to a vertical direction, you will need to add 

     

    flex-direction: column;

     

    as in 

     

    .center {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    View reply

    11 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    October 5, 2022

    Flexbox is a single dimension layout element. It can be either in a  horizontal or a vertical vertical direction. The default is horiontal. To change it to a vertical direction, you will need to add 

     

    flex-direction: column;

     

    as in 

     

    .center {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

     

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      broomeGirl
      broomeGirlAuthor
      Inspiring
      October 5, 2022

      OMG thank you so much 🙂

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices