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.