Menu
I want to align 3 elements in my <td> tag vertically in the center/middle. These are the elements that I want to align:
Essentially the elements are there for vertically scrolling of a chart. They are a bit misaligned. I want them all to be in center.
My current code is:
<td style="vertical-align:top;"> <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;"> <a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a> </div> <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div> <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;"> <a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a> </div> </td> I am open to removing div tag related to image buttons, but td tag should stay there.
697
HTML | <td> valign Attribute The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. Attribute Value: top: It sets the content to top-align. middle: It sets the content to middle-align.
For this to work, you need to have a parent container with the display: table; property, and inside that container you will have the number of columns you want to have centered, with the display: table-cell; (and vertical-align: middle; ) property.
When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to vertical-align in order to center things vertically.
We just have to add attribute align=center to the main td tag. Thanks to all for your help. I found the answer myself. This is the new code. Only the td tag has changed to add an additional attribute align=center. This will align all element within td tag in center.
There is also one more method to align elements vertically. You can use the vertical-align property, which commonly applies to inline, inline-block, and table-cell elements. But it cannot be used to align block-level elements vertically. Earlier, it was used with the valign attribute, but now this attribute is deprecated.
In all the cases, the vertical-align: middle; on the td does what is expected of it. That is, align the td to the center of that row and the entire contents of the td to the vertical middle (by default) leaving equal spaces at the top and the bottom. Here is what the W3 Spec says about vertical-align: middle:
The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. top: It sets the content to top-align. middle: It sets the content to middle-align. bottom: It sets the content to bottom-align. baseline: It sets the content to baseline. The baseline is the line where most of the characters sit.
Read about vertical-align in table cells here
vertical-align:middle vertical-align:top vertical-align:bottom http://phrogz.net/css/vertical-align/
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
