Question 260766 in Html Question posted in
Some basic documentation can be found here.

Html – I'm not sure how to move my .menu div to the center and have tried "text-align: center;" on my li, ul, and .menu

I’m making a project page for a skills test job application but when I’m making my "menu" piece and trying to center it so the entire div and contents of the div are in the middle of the page vertically and horizontally…nothing changes.

I have tried text-align on my li, ul and .menu elements in my css and have tried making my .menu div margin: 0 auto. I wanted my entire div with the contents inside to move to the middle of the page. And the current result is that they have not moved from the left side of the page. I reviewed some similar questions to mine and also see that the answers to those stemmed from setting the div width or ul width to 100% and just tried that but nothing worked to center my div in the middle of the page and instead centered the words in the middle of the div.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>My First HTML Page!</title>
        <style>
            h1 {
              text-align: center;
              color: #00008B;
            }
            img {
              width: 300px;
              height: 200px;
              border-radius: 10px;
              margin: auto;
            }
            ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              width: 200px;
              background-color: #f1f1f1;
              text-align: center;
            }
            li a {
              display: block;
              color: black;
              padding: 8px 16px;
              text-decoration: none;
              background-color: lightblue;
              text-align: center;
            }
            .menu {
              display: inline-block;
              list-style: none;
              text-align: center;
              margin: 0 auto;
            }
            li a:hover {
              background-color: orange;
              color: white;
            }



        </style>
    </head>
    <body>
        <h1>My First HTML Page!</h1>
        <p>
            This is my first HTML page(for this project, had some other small projects for fun as well in my spare time.) Some of my hobbies include video games(most notably ones like dark souls, street fighter and some other ones.), reading and learning, and going to the gym/working out. 
        </p>
        <img src="https://york.services.cloudsofttest.com/images/york-solutions/069_03_Activities_2011_08_11_0044.jpg" alt="Beautiful lake surrounded by greenery and forests." title="Beautiful lake surrounded by greenery and forests.">
        <img src="https://york.services.cloudsofttest.com/images/york-solutions/Lake_Rescue_Wikimedia-Nobrauch-20190904.jpg" alt="Open lake with waterfall and clear sky." title="Open lake with waterfall and clear sky.">
        <br/>
        <div class="menu">
            <ul>
                <li><a href="https://www.w3schools.com/" target="_blank">W3 Schools</a></li>
                <li><a href="https://game.capcom.com/residentevil/en/" target="_blank">Resident Evil</a></li>
                <li><a href="https://tv.lovenature.com/" target="_blank">Love Nature</a></li>
                <li><a href="https://tekken.com/" target="_blank">Tekken 8</a></li>
            </ul>
        </div>
    </body>
</html>
Tags:

2

Answers


  1. 0

    This code might help you answer:

    #container {
  color: red;
  background: #ffff00;
  width: 400px;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  background: #06c;
  flex: 0 0 120px;
}
    Centre Text:
<div id="container">
  <div id="content">
    Text
  </div>
</div>

    It basically uses a flexbox to align everything to the centre. You can take this example and try to tweak it to your specifications.

    Login or Signup to reply.
  2. 0

    The ordinary recipe for centering a block element with auto margins is:

    foo { width: something; margin: 0 auto; }

    It doesn’t work on .menu because you’ve set display: inline-block; (and it has no width set).

    The ul child of .menu, already having a width set, would center if you both applied margin: 0 auto; and also eliminated the uncalled for display: inline-block; from .menu, its parent.

    .menu { display: initial; } .menu ul { margin: 0 auto; }

    This is a good lesson in less is more. Not only is there basically no reason to have applied display: inline-block; to .menu, but the entire <div class="menu"> is unnecessary. The div conveys no meaning whatsoever, which is the purpose of HTML, and unnecessarily complicates the style you are attempting to achieve. Meaningless elements like div and span are good additions to help you achieve organization, or to achieve something stylistic that an additional element makes easier, but should otherwise not be used prematurely.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search