CODEWITHSUNDEEP
htmlcss
Jnb
Jnb

Reputation: 89

Center text in an li element

disagree/agree

In the example picture the words Totally disagree and Totally agree are centered. Do I have to make 4 differents div's with 0 margin to achieve this? Or can I do it in 1 div?

#answersTop {
 float: right;
 clear: both;
 width: 400px;
 height: 40px;
 margin: 50px 0 20px 0;
 background-color: #3d569d;
}
#answersTop li {
 float: left;
 color: #ffffff;
 font-weight: bold;
 margin-top: 5px;
}

.aFirst {
 margin-left: 10px;
}

.aMiddle {
 margin-left: 20px;
}

.aLast {
 margin-left: 20px;
     margin-right: 10px;
}


<div id="answersTop">
        <ul>
            <li class="aFirst">Totally disagree</li>
            <li class="aMiddle">Disagree</li>
            <li class="aMiddle">Agree</li>
            <li class="aLast">Totally agree</li>
        </ul>

    </div>

Upvotes: 0

Views: 84

Answers (4)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this give text-align:center; in li tag

demo

css

   li{
    display:inline-block;
      padding:20px 20px;
    background-color:red;
    vertical-align:top;
    text-align:center;

}

===========================================================================

demo1

css

#answersTop {
 float: right;
 clear: both;
 width: 400px;

 margin: 50px 0 20px 0;
 background-color: #3d569d;
}
#answersTop ul{
    margin:0;
    padding:0;
}
#answersTop li {
 float: left;
 color: #ffffff;
 font-weight: bold;
 margin-top: 5px;
    list-style-type:none;
    vertical-align:middle;
    text-align:center;
}
#answersTop li span{
    display:block;
}
.aFirst {
 margin-left: 10px;
}

.aMiddle {
 margin-left: 20px;
}

.aLast {
 margin-left: 20px;
     margin-right: 10px;
}

Upvotes: 1

Nukium
Nukium

Reputation: 156

This is an exemple with ul li structure with some CSS :

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                display: inline;
                text-align: center;
                margin: 0 5px;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>Totally disagree</li>
            <li>Disagree</li>
            <li>Agree</li>
            <li>Totally agree</li>
        </ul>
    </body>

</html>

Upvotes: 0

Emmanuel John
Emmanuel John

Reputation: 2325

Don't do text-align. Use the display property of the li tags instead. See demo http://jsfiddle.net/DWFLA/

Upvotes: 0

Stephan Weinhold
Stephan Weinhold

Reputation: 1643

You can center it in your li-elements with text-align: center;.

Upvotes: 0

Related Questions