How to vertically center; and make heights for varying <li> tags the same?

[Volitics]

.
Problem:

• I have got a list. The list has got form tags like checkboxes, text input boxes.

• The list items with the form tags have heights that are greater than plain text list items.

• I am using float left. I am wanting each of the list items to have four borders. The bottom borders are not aligned with each other.

• Setting heights to 50px won't work. I can set the heights to something like 50px. But the <li> contents are all aligned at the tops of the <li> tags.

• I cannot get the vertical-align: middle; directive to work. It has no effect on <li> tags.


Question 1: How can I get the heights of list items to be the same?

Question 2: How can I vertically center the contents for the <li> tags?

// List items (2) and (3) below have
// heights that are greater than list item (1).

<ul>
    <li>Riverdale High School</li>  // (1)
    <li><input type="checkbox" name="Part" value="Yes"></li> // (2)
    <li><input type="text" name="Time"/></li> // (3)
</ul> 

I would appreciate any help.

Thanks.

[Keidelberg]

here's what i got

<ul>
    <li>Riverdale High School</li>
    <li><input type="checkbox" name="Part" value="Yes">something</li>
    <li><input type="text" name="Time"></li>
</ul>

li{
float:left;
padding:10px;
border-style:solid;
border-color:red;
height:50px;
margin-top:50%;
margin-bottom:50%;
}

check it here http://jsfiddle.net/25R46/
let me know if it worked for you..

[Volitics]

Keidelberg;

That won't work. I have already tried setting the height(s) to a specified value. The problem is the contents of the <li> tags are at the tops of the tags.

The vertical-align: middle; directive does not work.

I need 1). the heights of the <li> tags to be equal; and 2). the contents vertically centered in the <li> tags.

[Keidelberg]

OK, i didn't get you the first time,
hopefully i did this time,

1- vertically centering the content of the tags
just put an identical padding-top and padding-bottom values,
in my example i applied
padding-top:30px;
padding-bottom:30px;
but you'll get an unequal heights of the fields which brings us to the second questions

2- equalizing the heights of the <li> tags

AFTER those values of the padding, set a height which is equal to [the highest tag (in your case the text input) minus the two padding you applied]
like this example, if you measure it and it turned 84
and you have applied padding top 30px and padding bottom 30px
84-30-30=24..
so the height would be 24
you can measure that by chrispederick.com tools

here's what i got

<ul>
    <li>Riverdale High School</li>
    <li><input type="checkbox" name="Part" value="Yes">something</li>
    <li><input type="text" name="Time"></li>
</ul>  

li{
float:left;
padding:10px;
border-style:solid;
border-color:red;
padding-top:30px;
padding-bottom:30px;
background:yellow;
height:24px
}

here
http://tinkerbin.com/GitltOzI

and I'm waiting for your response,,

[dresden_phoenix]

FIRST you should make sure none of you other CSS code is overriding your stile for these elements.

The vertical-align: middle; directive does not work.

Only tables (or elements with display:table) can vertically align content. Consequently, you need to set the LI's to display:table-cell; vertical-align:middle; but this will have it's own problems not the least of which is IE support. BTW.. if this a TABULAR, then you should use a TABLE tag anyway.



What has previously been suggested should work, but you need to coordinate the calculated height of the content of the LIs. In another words, the text in (1) might be bigger or smaller than the height of the inputs. so forexample ( and BTW this is just for example, AVOID USING PX for text size)

the text in (1) is 15px (+5px in lineheight) +20px of vertical padding= 40px but the checbox is only 10px +20px of padding=30px . See?

I think the best solution would be to use a pseudo element as a centering tool.

<style type="text/css">
ul, li {margin:0; padding:0;} /* general reset */
li{float:left; border:1px solid red; padding:0 10px}
li+li{border-left:none; width: auto}
ul,li{height:50px;}
li:after{display:inline-block; content:""; height:50px; vertical-align:middle}
 .textG{display:inline-block; vertical-align: middle} /* wraping the text in a span is optional, but  its a good idea if you also plan to limit the with of the parent LI */
 /* more optional stuff to make it display like a grid*/
 .row {clear:left; border-left:1px solid red; border-top:none}
  li, .row{ width:100px}
 .row ~li {border-top:none}

</style>

<ul>
    <li><span class='textG'>Riverdale High School</span></li> 
    <li><input type="checkbox" name="Part" value="Yes"></li>  
    <li><input type="text" name="Time"/></li>
    <li class="row"><span class='textG'>San Pasqule High School</span></li> 
    <li><input type="checkbox" name="Part" value="Yes"></li>  
    <li><input type="text" name="Time"/></li>
    <li  class="row"><span class='textG'>East High School</span></li> 
    <li><input type="checkbox" name="Part" value="Yes"></li>  
    <li><input type="text" name="Time"/></li>
</ul>

HOWEVER!!!
I think this is a far more SEMANTIC solution:

<style type="text/css">
ul, li {margin:0; padding:0;list-style: none;} /* general reset */
  ul{border-bottom:1px solid red; float:left;}
  li {overflow:hidden; border:1px solid red; border-right:none;border-bottom:none;}
 .seg{float:left; border-right:1px solid red; height:50px; padding: 0 10px}
 .seg:after{content:"";height:100% }
 .seg span, .seg:after{display:inline-block;vertical-align:middle}
 .seg { width:6.5em}
 .seg+.seg{width: auto}
</style>

<ul>
    <li><span class='seg'><span>Riverdale High School</span></span>  
   <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
   <span class='seg'><input type="text" name="Time"/></span></li>
    <li><span class='seg'><span>East High School</span></span>  
   <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
   <span class='seg'><input type="text" name="Time"/></span></li>
    <li><span class='seg'><span>San Pasquale High School</span></span>  
   <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
   <span class='seg'><input type="text" name="Time"/></span></li>
 </ul>

I would also suggest using a height in EMs or EXs instead of PX, for added fluidity.

[Volitics]

Keidelberg, dresden-phoenix;

Thanks for helping with my problem.

My data is in tabular form. After thinking about it I might be better off using a table.

It's for a baseball score table. The tables are going to have about fifty rows and about eight columns.

I guess maybe the reason why I can't get the <li> tags to do what I want is because lists are not meant to be used for tabular data.

Thanks again.

[ralph.m]

I guess maybe the reason why I can't get the <li> tags to do what I want is because lists are not meant to be used for tabular data.

Wel,, no, they aren't ... but in terms of how something displays, this is an issue of CSS rather than semantics. As D_P said, you can make the LIs display as you want with display: table etc. But if this is tabular data, then certainly use an HTML table instead.