How to center <ul>, force images inside <li> tags, vertically center <li> tag

HTML & CSS
1

Hello;

I have got a list that has three items. The first and third list items are images. The second list item is text. (see Html code at the very bottom of this post.)

I need to do the following:

1). Center the list at the center of the page.
2). Force the images for list items one and three inside the borders for the <li> tags.
3). Vertically center the text in list item two so that it is half way between the top and the bottom of list items one and three.
4). Force the entire list within a <div> tag.

I have been trying to use the float: left; directive (see first css example below). The float: left; directive forces the images for list items one and three inside the borders of the <li> tags. The margin directive also works. I can adjust the vertical position of list item two with the margin directive.

However, using the float: left directive there are two problems:
a). I can’t center the list using the text-align: center; directive.
b). The <div> tag is a flat line; the list items one, two, and three are below the div tag.


ul
{
list-style-type: none;
border-style: solid;
border-width: 1px;
padding: 0px;
}
li
{
border-style: solid;
border-width: 1px;
float: left;
}

I can use the text-align: center; and the display: inline; directives, instead of the float: left; directive, like the example css code below. The below code will center align the list. It will also force the list inside the <div> tag.

However, there are two problems with the code below:
c). The images in list items one and three are not inside the borders of the <li> tags.
d). The margin: pixels; directive won’t work for list item two, so there’s no way to adjust the vertical position of the text in <li> two.


ul
{
list-style-type: none;
border-style: solid;
border-width: 1px;
padding: 0px;
text-align: center;
}

li
{
border-style: solid;
border-width: 1px;
display: inline;
}

Below is the Html code that I am trying to use:


<div>
<ul>
	<li><img src="test1.png" width="33" height="45" /></li>
	<li style="margin: 20px 5px 0px 5px;">Text here - need to vertically center</li>	
	<li><img src="test1.png" width="33" height="45" /></li>	
	</ul>
	</div>


<div>
	Just plain text here.
	</div>

I have been trying to get this problem figured out since this morning. I would appreciate any help that anybody might give.

Thanks.

2

‘inline-block’ instead of ‘inline’ puts the images in the border for me, setting a height and a line-height (they must be the same) will vertically center-align the text.

3

  1. I’m wondering what you even have the DIV around the UL for – UL’s a perfectly good block level container, what are you even doing on the DIV??

  2. Inlined style == /FAIL/.

  3. What makes that a LIST?!? That’s not a list of choices or a list of anything – it’s two images and some text!

  4. You want a border and centering, why not put the border on the IMG tags directly?

  5. Those images – should they even BE IMG tags? They kinda look, I dunno… presentational in nature.

I think I’d have to see the images in question and what it is you are actually trying to do, but I suspect you are building with presentational screen markup – an outdated and outmoded way of building websites. (Well, unless you ask the HTML 5 junkies who think 3.2 was the greatest thing since sliced salami…)

ASSUMING those images should even be in the markup (I’m not sure they should)


<div class="someStuff">
	<img src="test1.png" width="33" height="45" alt="" />
	<span>Text here - need to vertically center</span>
	<img src="test1.png" width="33" height="45" alt="" />
<!-- .someStuff --></div>



.someStuff {
	text-align:center;
}

.someStuff img,
.someStuff span {
	border:1px solid #000;
}

.someStuff span {
	margin:20px 5px 0;
}

Though again, I’m not sure they should…


<div class="imageWrappedText">
	Text here - need to vertically center
<!-- .imageWrappedText --></div>



.imageWrappedText {
	text-align:center;
}

.imageWrappedText span {
	position:relative;
	height:1%; /* trip haslayout, fix IE positioning bugs */
	margin:20px 5px 0;
	border:1px solid #000;
	
	/* IE7- expression to fake :before and :after */
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('afterBegin','<b class="before"></b>')
		insertAdjacentHTML('beforeEnd','<b class="after"></b>')
	);
}

.imageWrappedText span:before,
.imageWrappedText span:after,
.imageWrappedText span b {
	position:absolute;
	top:-20px;
	width:33px;
	height:45px;
	background:url(images/test1.png) 0 0 no-repeat;
	border:1px solid #000;
}

.imageWrappedText span:before,
.imageWrappedText span b.before {
	left:-35px;
}

.imageWrappedText span:after,
.imageWrappedText span b.after {
	right:-35px;
}

Though with an image before and after… is this a heading? If so, why isn’t it a heading TAG?

Again, guessing wildly since we’re not seeing the whole page, so it’s impossible to say what the proper markup for such a list is – I can say I’m fairly certain this is NOT a list, and should NOT be in a list.

I mean, the border on all the elements when we can’t even be sure they’re the same size (since you don’t declare any font sizes or line-heights…) … what are you trying to do here?

4

Cory R, deathshadow60;

Thank you for responding to my question. I appreciate the help.

I think I got it figured out. I applied the inline-block, height, and line height directives like Cory R suggested. I had to tinker with it a little bit. I also had to put vertical-align: bottom; in the code for the <li> tags. It looks like it’s working good now.

Also, deathshadow60 is right. I don’t need the <div> tag. The <ul> tag works perfectly good as a container. I decided to remove the <div> tag.

Below is the revised code: (I pared it down some by removing the borders from around the <ul> and <li> tags.)


ul.Heading
{
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
}
li.Heading
{
display: inline-block;
padding: 0px;
margin: 0px;
height: 45px;
line-height: 45px;
vertical-align: bottom;
}



<ul class="Heading">
    <li class="Heading"><img src="test1.png" width="33" height="45" /></li>
    <li class="Heading"style="margin: 20px 5px 0px 5px;">Text here - now vertically centered</li>
    <li class="Heading"><img src="test1.png" width="33" height="45" /></li>
    </ul>

Thanks again for the help. :slight_smile: