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

Centre not working

  • October 5, 2022
  • 1 reply
  • 2675 views

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 has been closed for replies.
    Correct answer BenPleysier

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

     

    1 reply

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

     

    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 🙂

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