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/