Solved

Centering elements in li tags

Posted on 2014-09-08
2
97 Views
Last Modified: 2014-09-08
Hello experts
I have list of elements and i use this for "steps" function.
I need help to center the I, II, III, a.s.o. in the list too.
Any help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      Untitled Document
    </title>
    <style type="text/css">
	#steps{ list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
    #steps li {font-size:22px; float:left; padding:10px; color:#b0b1b3;}
    #steps li.first {float:left; padding-left:0px !important; color:#b0b1b3;}
    #steps li span {display:block;font-size:14px;}
    #steps li.current { color:#8F7861;}
	</style>
  </head>
  
  <body>
    <ul id="steps">
      <li class="first" id="stepDesc1">
        &nbsp;I
        <span>
          Blablablabla
        </span>
      </li>
      <li class="" id="stepDesc2">
        &nbsp;II
        <span>
          Blablablabla
        </span>
      </li>
      <li class="" id="stepDesc3">
        &nbsp;III
        <span>
          Blablablabla
        </span>
      </li>
      <li class="current" id="stepDesc4">
        &nbsp;IV
        <span>
          Blablaa
        </span>
      </li>
      <li class="" id="stepDesc5">
        &nbsp;V
        <span>
          Blablablabla
        </span>
      </li>
      <li class="" id="stepDesc6">
        &nbsp;VI
        <span>
         Blablablablabla
        </span>
      </li>
    </ul>
  </body>
</html>

Open in new window

0
Comment
Question by:Panos
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40310486
#steps li {
    ...
    ...
    text-align: center;
}

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 40310521
Hi Gary
Thank you for your help.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question