_动力学知识库

问题描述:

how to center a div in a td cell and a link inside of it ?

<table id="in-logos" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div><a>something 1</a></div></td>
<td><div><a>something 2</a></div></td>
<td><div><a>something 3</a></div></td>
<td><div><a>something 4</a></div></td>
<td><div><a>something 5</a></div></td>
<td><div><a>something 6</a></div></td>
<td><div><a>something 7</a></div></td>
<td><div><a>something 8</a></div></td>
</tr>
</table>

table hight 70px and div height 60px

how to center the link in the centered both ...vertically and horizontally

here is my css , i was unable to vertically center the (a) inside the (div>

#in-logos td{
width: 10%;
vertical-align: middle;
}
#in-logos td div{margin: auto;
width: 90%;
height: 50px;
background-color: white;
box-shadow:1px 1px 1px gray;
text-align: center;
vertical-align: middle;
}
#in-logos td div a{
font-family: arial;
font-size: 14px;
color: #535353;
}

网友答案:

You can set "display" property of "#in-logos td div" to "table-cell" and "a" will be vertically centered. display: table-cell is not supported ie7 and below.

#in-logos td{
  width: 10%;
}

#in-logos td div{margin: auto;
   display: table-cell;
   width: 90%; 
   height: 200px;
   background-color: white;
   box-shadow:1px 1px 1px gray;
   text-align: center; 
   vertical-align: middle;
 }

#in-logos td div a{
   font-family: arial;
   font-size: 14px; 
    color: #535353;
}


<table  id="in-logos" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td><div><a>something 1</a></div></td>
 <td><div><a>something 2</a></div></td>
 <td><div><a>something 3</a></div></td>
 <td><div><a>something 4</a></div></td>
 <td><div><a>something 5</a></div></td>
 <td><div><a>something 6</a></div></td>
 <td><div><a>something 7</a></div></td>
 <td><div><a>something 8</a></div></td>
 <td><div><a>something 9</a></div></td>
 <td><div><a>something 10</a></div></td>

</tr>
</table>

Fiddle: http://jsfiddle.net/LfLpqe6L/

网友答案:

You can use just

 td{
    text-align:center;
    }

网友答案:

check if it helps :

code:

<html>
<head>
<style>
#in-logos td{
  width: 10%;
  vertical-align: middle;
  height: 50px;
  background-color: white;
  box-shadow:1px 1px 1px gray;
}

#in-logos td div{margin: auto;
   width: 90%; 

   text-align: center; 
   vertical-align: middle;
 }

#in-logos td div a{
   font-family: arial;
   font-size: 14px; 
   color: #535353;
}
</style>
</head>
<body>
<table  id="in-logos" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td><div><a>something 1</a></div></td>
 <td><div><a>something 2</a></div></td>
 <td><div><a>something 3</a></div></td>
 <td><div><a>something 4</a></div></td>
 <td><div><a>something 5</a></div></td>
 <td><div><a>something 6</a></div></td>
 <td><div><a>something 7</a></div></td>
 <td><div><a>something 8</a></div></td>
</tr>
</table>
</body>
</html>

fiddle : http://jsfiddle.net/L46ejfj6/