CODEWITHSUNDEEP
htmlcssalignmenthtml-lists
Alex Guerin
Alex Guerin

Reputation: 2386

CSS: Unordered list alignment

Consider the following Fiddle: http://jsfiddle.net/wNrqu/

For the last 4 hours I have been trying to do something like this: enter image description here

I'm trying to make the list display four items per 'row' with the two spans's centered underneath the image. The text must be able to wordwrap. CSS is one tricky beast to master!

If you check out the Fiddle, my result is somewhat odd. Items with larger text cause a blank gap to be inserted...

Upvotes: 0

Views: 714

Answers (4)

user2197138
user2197138

Reputation: 1

Thanks for the help...although I didn't ask the question initially.
So far, it's working fine although I wanted to center everything so :

I changed the CSS from

#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}

to:

#container{margin: 0 auto;width: 1000px;}
#container div {display: inline-block; width: 150px; text-align: center;}

Upvotes: 0

user1069475
user1069475

Reputation:

If I'm doing this css, I will not using the order list, I will using div. Maybe this will help you.

<div id="container">
<div class="row clearfix">
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p>   <p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
</div>
</div>

then in the css

#container {width:1000px;}
.img {width:133px; height:200px; margin-right:20px;}
.img p{text-align:center;}
.fleft{float:left;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

Upvotes: 2

Shalini Subramani
Shalini Subramani

Reputation: 502

Please refer the following location:

http://jsfiddle.net/wNrqu/

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

<div id="container">
   <div><img src="kitten.png" />Cute Kitten<br />yes</div>
   ......
</div>

Then in your CSS:

#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}

That should do it. Much easier than using an unordered list because then you don't have any styles that a list has by default that need overriding.

Upvotes: 3

Related Questions