How to center an unordered list

user_16654184 0
Viewed 97

I've tried multiple times now and I can't figure out how to place my unordered list in the middle of my div.

1: Describes how it looks like right now enter image description here 2: Describes how I wish it to look like enter image description here

HTML:

 <div id="wrapper">
    <div class="container">
    <img src="flower.jpg"/>
    </div>
    <div class="header">
        <ul>
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>

CSS:

#wrapper {
    position:absolute;
    background-color: white;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

img {
    width: 100%;
    height: 100%; 
    display: block;
}

.header {
    width: 100%;
    height: 100px;
    background-color: green;
}

.header a {
    color: black;
    text-decoration: none;
    margin: 50px;
    padding: 10px;
    font-size: 40px;
    text-align: center;
}

ul {
    list-style-type: none;
    position: absolute;
}

li {
  float: left;
}

What am I doing wrong? I've tried these in multiple elements:

  • position: relative/absolute
  • text-align: center
  • margin
  • padding
  • display: inline

Thanks for the help <3

css html
4 Answers

You can change the styles for the ul element to match the code below:

ul {
 list-style-type: none;
 position: absolute;
 left: 0;
 right: 0;
 display: flex;
 justify-content: center;
}
user_102087790

You can achieve this with flex:

.header {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: green;
    justify-content: center;
}

Note: you can also change the value of justify-content. A very good explanation about flex and the different properties is this one: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

user_159437680 
ul {
  display: flex;
  justify-content:center;
  text-align: center;
  list-style-type:none;
  width:80%;//depending on how wide you want it and note justify center wont work 
   unless you specify width on most cases

}
user_144756180

You can do that using flex, like this:

ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style-type:none;
}

You can also try space-around value for justify-content property, and items will have space before, between, and after them.

Here is the working example: https://jsfiddle.net/tLc9zmoy/26/

user_143898300
Related