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>
2
Answers
This code might help you answer:
It basically uses a flexbox to align everything to the centre. You can take this example and try to tweak it to your specifications.
The ordinary recipe for centering a block element with auto margins is:
It doesn’t work on
.menubecause you’ve setdisplay: inline-block;(and it has no width set).The
ulchild of.menu, already having a width set, would center if you both appliedmargin: 0 auto;and also eliminated the uncalled fordisplay: inline-block;from.menu, its parent.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. Thedivconveys no meaning whatsoever, which is the purpose of HTML, and unnecessarily complicates the style you are attempting to achieve. Meaningless elements likedivandspanare 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.