This is a part of my table. I have a button and 2 images in the td. I want to move them to the center. How do I do it? I have tried padding, margin. But they doesn't work.
<td align="center" style="width: 200px;">
<input type="button" name="submit" onClick="mySubmit();"
style="position: relative; float: left; top: 10%" value=" GO ">
<a href="#" style="position: relative; float: left; top: 2%;" onClick="mySubmit();">
<img src="../images/refresh.png" style="position:relative;">
</a>
<input type="checkbox" name="upsCheckbox" id="upsCheckbox" onChange="setRefresh(this.checked)"/>
<a href="#" style="position: relative; float: left; top: 2%;" onClick="enterFullscreen();">
<img src="../images/FullScreen.jpg" style="position: relative; top:2%;">
</a>
</td>
HTML | <td> align Attribute left: It sets the text left-align. right: It sets the text right-align. center: It sets the text center-align. justify: It stretches the text of paragraph to set the width of all lines equal.
It is possible to change the horizontal alignment of items within table cells. Table data defaults to left alignment; table headers to center. In order to change the alignment in one cell, insert the appropriate "ALIGN=" attribute within the code for that cell.
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.
One of the most common ways to center a table is to set both the bottom and top margins to 0, and the left and right margins to auto. If you're after a table that's an exact width, you may do this as you usually would and the automatic margin will divide the space left over.
Example: http://jsfiddle.net/VEJk7/
Simplified HTML:
<table>
<tr>
<td style="width: 400px;">
<input type="button" value=" GO ">
<a href="#"><img src="1.jpg"></a>
<input type="checkbox">
<a href="#"><img src="2.jpg"></a>
</td>
</tr>
</table>
CSS:
td {
vertical-align: middle;
text-align: center;
}
td a, td input, td img {
vertical-align: middle;
display: inline-block;
}
i think you want horizontally center ... text-align:center
will do the trick
CSS::
td input[name="submit"], td input[name="upsCheckbox"]{
text-align:center;
}
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