Simple HTML/CSS positioning


#1

https://codepen.io/AlexakaCardi/pen/RLwMxg

I have this very simple dropdown menu in HTML/CSS, but I can’t seem to position it exactly in the middle. How do I know for sure that my object is in the center of the screen, when we talk about a whole dropdown menu, without actually using bootstrap? :slight_smile:

Note: You might have to open the pen to know what I’m talking about


#2

I know you said without bootstrap but I highly recommend bootstrap, it’ll help you not go insane later, but if you must, then use margin and padding to position, but then it will not look nice on any screen other then your resolution.


#3

Try putting margin-left: auto and margin-right:auto on the UL element.


#4

flexbox is a good candidate for what you’re looking for.

ul { 
display: flex; //make your ul element a flex element
flex-direction: column; //set the direction of the children (lis) to be column instead of row
} 

li {
align-self: center; //and the magic you're looking for, aligning the li's to the center
}

note that while looking at your pen and adding my styles, i commented out any floats and explicitly set widths/heights as that would likely mess with things. Also removed your % based margins on the body. Its best not to set margins to create a container on the body class, add a wrapping div to do that for you. Happy coding, hope this helps you!