I'm using a table which contains an H3 inside. Inside that H3 there is a google search bar. Now the google search bar is alligned at the top of the H3. How can I vertically allign it so it's centered? This is what I have at the moment:
<table>
<tr>
<td id="Vak1.3"><h3>
<script type="">
(function () {
var cx = '013446364428343597193:qtxsarco2zs';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</h3></td>
</tr>
</table>
Anonymous User
01-Jun-2015Generally spoken, its no longer a good practice to design a website with a table. This doesn't mean that tables are bad in general. That said you could put your searchbar into a div:
<div id="container">your searchbar here..</div>
That div can be vertically (and horizontally) aligned easily with:
#container {position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
If you want to have only vertical alignment you can change:
margin-top: auto;
margin-bottom: auto;
But be patient that position: absolute is always related to the next parent element, which got the position element.