mlibre mlibre - 4 months ago 14
HTML Question

Set List Item (li) exactly in center of page

Here is my simple code:

<ul>
<li>
Example1
</li>
<li>
Example12
</li>
<li>
Example13
</li>
</ul>


with this
css
:

ul
{
text-align: center;
margin: 0;
padding: 3vh;
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
overflow: hidden;
list-style-type: none;
}
li
{
display: inline;
}


And
"Example1"
dose not exactly in center of page.
this is how it look like now(
black
line mean center of page, replace
"Home"
with
"Example1"
):

enter image description here

How i can fix it to appear look like this(
black
line mean center of page):

enter image description here

Answer

Define your li display:inline-block; and your ul define box-sizing:border-box left:0;right:0;

ul
{
    text-align: center;
    margin: 0;
    padding: 3vh;
    position: fixed;
    bottom: 0;
    left:0;right:0;
    background-color: #333;
    overflow: hidden;
    list-style-type: none;box-sizing:border-box
}
li
{
    padding-left: 3vh;
    padding-right: 3vh;
    display: inline-block;
  vertical-align:top;
margin:0;
}
<ul>
  <li>
    Home
  </li>
</ul>