Vertically Center dynamic UL

Question

I've been trying to center an unordered list with dynamic height, without any success, so far.

Can it be done? And how?

I am looking for a solution that will be older browser friendly.

The HTML:

<div class="info gradient">

<ul>
<li><p class="text-01">Lorem</p> <p class="description-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-02">Ipsum</p> <p class="description-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03">Dolor</p> <p class="description-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>

</div>

For the CSS take a look at the this FIDDLE

Thanks.

vertically center within the browser window? within the containing div? or what? — andi, Dec 11 '13 at 16:00
possible duplicate of [How to vertically center content with variable height within a div?](http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div) — Pavlo, Dec 11 '13 at 16:17

web-tiki · Accepted Answer · 2013-12-11T16:13:18.067

Try this:

Fiddle

HTML:

<div class="info gradient">
<div class="ul_wrap">
<ul>
<li><p class="text-01">Lorem</p> <p class="description-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-02">Ipsum</p> <p class="description-02">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03">Dolor</p> <p class="description-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>
    </div>

</div>

As said here The values table and table-cell for the display property are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

score 0 · Answer 2 · answered Dec 11 '13 at 16:00

0

You means like THIS FIDDLE?

CSS:

html, body, ul{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
body{
    position:fixed;
    text-align:center;
}
ul{
    display:table;
    list-style:none;
}
ul li{
    display:table-row;
    margin:0 auto;
}

HTML:

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

answered Dec 11 '13 at 16:00

SW4

69,876
20
132
137

No. As in, the dynamic `
– Nikk Dec 11 '13 at 16:06

nathanleachman · Answer 3 · 2013-12-11T16:24:17.210

0

you need to add style="margin-left:200px" at the beggining of each paragraph.

Note: You can adjust the px to however you want has long as each paragraph is the same

<div class="info gradient">

<ul>
<li><p class="text-01" style="margin-left:200px">Lorem</p> <p class="description-01" style="margin-left:200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>

<li><p class="text-02" style="margin-left:200px">Ipsum</p> <p class="description-02" style="margin-left:200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03" style="margin-left:200px">Dolor</p> <p class="description-03" style="margin-left:250px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>

</div>

http://jsfiddle.net/nate32100/j3aS2/

edited Dec 11 '13 at 16:24

answered Dec 11 '13 at 16:08

nathanleachman

310
2
11

How exactly will this center the dynamic `
– Nikk Dec 11 '13 at 16:10
yes it does it makes them evenly (dynamically) aligned going down. – nathanleachman Dec 11 '13 at 16:10
Could you please show me what you mean, in the FIDDLE linked above? – Nikk Dec 11 '13 at 16:14
how do i make a fiddle – nathanleachman Dec 11 '13 at 16:15
"how do i make a fiddle" => google it (use "jsfiddle" instead of "fiddle") – web-tiki Dec 11 '13 at 16:18

Vertically Center dynamic UL

3 Answers3