How to make a horizontal list start in the center of the page?


Tags: css

Problem :

just a quick CSS question. Does anyone know how to display a horizontal list at the center of the div tag. The number of elements in the list can change from page to page and I was hoping for them to start in the middle of the page. For example if there was only on list item then it would be in the center but if there was two then the first one would move slightly to the left and the second would be slightly to the right. I know the changes have to be made to the ul and li CSS code. This is what I have so far

.ui-yt-tabs {
    position: relative;
    width: 740px;
    height: 600px;
    float: left;
}

.ui-tabs .ui-tabs-nav {
    position: absolute;
    top: 470px;
    height: 117px;
    width: 735px;
    padding: 0px;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
}


Solution :

You can do something like this:

ul {
text-align:center;
}

ul li {
display: inline-block;
}

Just remember to remove float: left; from your LI items


    CSS Howto..

    All sections show over fixed header when scrolling

    Why IE10 shows something totally different

    How to make the background image to fit into the whole page without repeating using plain css?

    How to style a single QToolButton using qss/css

    how to read value of style[“display”] property of webcontrol

    How to make a scrollable div inside of a div with a specific height

    How to add composite css -webkit-mask-image?

    How to extract class names from a CSS selector?

    Some misunderstanding how to use bootstrap and css

    What is the problem with Visual Studio.Net's “absolute positioning”, and how is that problem fixed by CSS's “absolute positioning”?

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    Why does overflow hidden affect height and how can I fix it in this example?

    3x3 CSS grid: how to make center div the only one with a fixed height/width?

    How to add separate style to google.visualization.DataTable without changing its own styles

    how to load the content onclik menu?

    How do I style a Javascript button using d3?

    How to use radio button checked or clicked property in my case

    How to utilize css of this style in LESS?

    How can i make my paragraph go to the next line after a certain width

    How to use CSS to make this works on retina screen?

    How do i select all nodes and apply a css style to all of them, D3

    how to include css style to modify existing placeholder

    How to create grid position elements like in this image css

    How to increase spacing between lines in CSS?

    how to find a class and apply a style with jquery?

    How to declare JavaScript and CSS XHTML-compatible?

    how to vertically center align div elements with contents other than text

    how do i fit background image to any screen?

    how to place an image at the center of the browser irrespective of the resolution?

    How to hide one table and show another in nice animated way?