How to Center Text Inside a Li Element Inside an Unordered List

How to center text inside a li element inside an unordered list

While you're assigning unequal padding values to the left and right of the li (0.75em and 2em respectively) the text can't be centred since you're forcing it off-centre with the padding.

If you amend the padding to: padding: 0.5em 1em; (0.5em top and bottom, 1em left and right) then it can be centred.

#nav-menu {    font-family: Verdana, Arial, Helvetica, sans-serif;    height: 30px;    background-image: url(../img/menu_bg.png);    background-repeat: repeat-x;    border-bottom: dotted thin #666666;    border-top: dotted thin #666666;    text-align: center;    width: 800px;}
#nav-menu ul {    list-style: none;    padding: 0;    margin: auto 0;}
#nav-menu li {    float: left;    border-right: dotted thin #666666;    list-style: none;    padding: 0.5em 1em;}
#nav-menu li a {    line-height: 1.5em;    color: #333333;    text-decoration: none;    font-size: 12px;    font-weight: bold;    display: block;}

<div id="nav-menu">    <ul>        <li class="current_page_item"><a href="#" title="Home">Home</a></li>        <li class="current_page_item"><a href="#" title="Home">Home</a></li>        <li class="current_page_item"><a href="#" title="Home">Home</a></li>        <li class="current_page_item"><a href="#" title="Home">zxczczxczHome</a></li>    </ul></div>

How to center an unordered list?

ul {  display: table;  margin: 0 auto;}

<html>
<body>  <ul>    <li>56456456</li>    <li>4564564564564649999999999999999999999999999996</li>    <li>45645</li>  </ul></body>
</html>

Centering an li element without taking bullet point into account

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Sample Image

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {  position: fixed;  width: 350px;  height: 100%;  top: 0px;  left: 0px;  background-color: rgb(230, 255, 230);}
ul {  position: relative;  bottom: 30px;  display: flex;  flex-direction: column;  align-items: center;  list-style-type: none; /* hide bullet points */  padding-left: 0; /* ADDED */}
li {  margin-top: 40px;  padding-left: 75px;  border-color: white;  border-width: 2px;  border-style: solid;  padding: 5px 20px 5px 20px;  background-color: green;  border-radius: 10px;  width: 100px;  text-align: center;}
.navlink {  text-decoration: none;  color: white;}

<div id="square">  <ul>    <li><a class="navlink" href="#">Introduction</a></li>    <li><a class="navlink" href="#">Middle</a></li>    <li><a class="navlink" href="#">End</a></li>  </ul></div>

How can I center ul li into a div?

Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.

ul {
    width: 70%;
    margin: auto;
}

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

Can't center li inside ul

If you are designing a menu you need this markup:

<div class="menu">
   <ul>
      <li><a href="#" class="menu">Item 1</a></li>
      <li><a href="#" class="menu">Item 2</a></li>
   </ul>
</div>

and this CSS to align the items:

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
  background:lightcyan; //for visualization only
}

.menu ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

.menu ul li {
  display:inline-flex;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background:lightblue; //for visualization only
  align-items:center;
  justify-content:center;
}

.menu ul li a {
  align-self:center;
}

Check the JSfiddle https://jsfiddle.net/r2gnkknv/

You will end with this:
Sample Image

how to center image + text in an li Element

Your specific problem is that you are floating the image and span left but then want them centered. Remove the float left on both then you can put text-align: center on your li elements.

li {
width:173px;
height:30px;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
border-color:#CCC;
text-align:center;
}

.text {
color:#2EA620;
line-height:30px;
}

How to horizontally center align li in ul?

Open the developer tools in your browser.
Inspect the list and the list items
Find where there is some spacing you don't want

Sample Image

… then remove it:

ul {
    padding-left: 0;
}

How do I center list items inside a UL element?

write display:inline-block instead of float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/

How to align text with ul & li

Remove padding and margin for zero. Remove text-align:center for #footerRow

#footerRow ul {margin:0px;padding:0px}#footerRow ul li{  text-align: left;  list-style:none}#footerRow h2{min-height:30px}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/><div class="container">    <div class="row" id="footerRow">      <div class="col-xs-12 col-md-3">        <h2>Product</h2>        <ul>          <li> <a href="templates.php">Templates</a></li>           <li> <a href="pricing.php">Pricing</a></li>        </ul>      </div>      <div class="col-xs-12 col-md-3">        <h2>Company</h2>        <ul>          <li><a href="aboutus.php">About Us</a></li>          <li><a href="contact.php">Contact us</a></li>          <li><a href="terms.php">Terms of Servise</a></li>          <li><a href="policy.php">Privacy policy</a></li>        </ul>      </div>      <div class="col-xs-12 col-md-3">        <h2>Language</h2>        <ul>          <li><a href="login.php">Englisch</a></li>          <li><a href="login.php">German</a></li>          <li><a href="login.php">Srpski</a></li>        </ul>      </div>                <div class="col-xs-12 col-md-3">        <h2> </h2>        <ul>          <li><a href="login.php">facebook</a></li>          <li><a href="login.php">kaaa</a></li>          <li><a href="login.php">kaaa</a></li>        </ul>      </div>      </div></div>

How to Center Text Inside a Li Element Inside an Unordered List