Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I align items in a td?

Tags:

html

css

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>
like image 675
Anusha Honey Avatar asked Sep 11 '13 09:09

Anusha Honey


People also ask

How do I align text in 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.

How do you align an item in a table?

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.

How do you vertically align in TD?

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.

How do you center elements in a table?

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.


2 Answers

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;
}
like image 135
biziclop Avatar answered Sep 22 '22 02:09

biziclop


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;

}
like image 42
Ritabrata Gautam Avatar answered Sep 22 '22 02:09

Ritabrata Gautam