CODEWITHSUNDEEP
htmlcsshtml-listscentering
user8785970
user8785970

Reputation:

How do I horizontally align my li's in an ul element?

my problem is that I can't figure out, no matter what i try, why the <li> doesn't want to center. Note: by center, I mean make the three <li>'s horizontally center in the my <div> element.
My Code: 

<div class="bottomBar" id="bottomBar">
    <ul class="bottomUl">
        <li>
            <span onclick="contactMe ();"> Contact Me </span>
        </li>
        <li>
            <span> Help </span>
        </li>
        <li>
            <span> Social Media </span>
        </li>
    </ul>
</div>

And the CSS: 

.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 10%; list-style-type: none; margin: 0px; display: block;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.buttonUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}

Upvotes: 1

Views: 8324

Answers (3)

Chatterji Neerugatti
Chatterji Neerugatti

Reputation: 399

I think your css of ul should be changed a bit. Remove width:10% and add text-align:center and padding:0 to ul.

.bottomUl {
    color: white;
    list-style-type: none;
    margin: 0;
    display: block;
    padding: 0;
    text-align: center;}

The above solution will center the li in the middle vertically

EDIT : 1

If you want all li's to be on the same row. You need to explore flex in CSS. Your css should be like following for ul

.bottomUl {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;}

The above CSS will center the li's center. The justify-content property will help you place the elements as per your need in flex.

The following CSS will put space around the li's in the flex.

.bottomUl {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;}

The following CSS will put space between the li's. If you use space-between the flex items.

.bottomUl {
   color: white;
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-between;}

The following CSS will space the li's evenly. If you use space-evenly property to justify-content

.bottomUl {
   color: white;
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-evenly;}

I would like to suggest to explore flex box more in the following link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

For cross-browser compatibility. Please visit the following link, whether it meets you need https://caniuse.com/#feat=flexbox

Hope this answer will help you :)

Upvotes: 6

Gilbert Cut
Gilbert Cut

Reputation: 113

To make elements centered you need to use margin: auto css property. Just check the example code below. The div will be centered within it's parent and will take 80% width. The same will happen with the ul element.

div{
    width: 80%;
    margin: auto;
}
li{
    list-style-type: none; 
    display: inline-block;
}
ul{
    width: 80%;
    margin: auto;
}

If you want it really centered, please make sure you remember of default CSS properties for DOM elements:

https://www.w3schools.com/cssref/css_default_values.asp

Within Default CSS Values for HTML Elements, focus on margin and padding. To have full control on layout, just use following:

*{
margin: 0;
padding: 0;
}

The all * selector will make sure to set padding and margin to 0 for all of your elements.

I wonder why margin: auto; does not work on li elemets. I figured out the solution for you:

<!DOCTYPE html>
<html>

<head>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 80%;
            margin: auto;
            background-color: yellow;
        }

        li {
            list-style-type: none;
            display: inline-block;
            background-color: blue;
            width: 32%;

        }

        ul {
            width: 80%;
            margin: auto;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="bottomBar" id="bottomBar">
        <ul class="bottomUl">
            <li>
                <span onclick="contactMe ();"> Contact Me </span>
            </li>
            <li>
                <span> Help </span>
            </li>
            <li>
                <span> Social Media </span>
            </li>
        </ul>
    </div>

</body>

</html>

Upvotes: 0

Daniel L
Daniel L

Reputation: 19

Try this css.

.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 100%; list-style-type: none; margin: 0px; display: block; text-align: center;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.bottomUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}

What I did:

  • Changed '.buttonUl li' to '.bottomUl li'
  • Changed 'width: 10%;' to 'width: 100%;' under .bottomUl
  • Added 'text-align: center;' under .bottomUl

Upvotes: 0

Related Questions