Question

我正在使用一个包含H3内部的表。在H3内部有一个谷歌搜索栏。现在，谷歌搜索栏位于H3的顶部。我怎样才能将它垂直对齐以使其居中？这就是我现在所拥有的：

<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>

Answer 1

一般来说（不知道你的代码），用桌子设计网站不再是一个好习惯。这并不意味着表格一般都很糟糕。那说你可以把你的搜索栏放到div中：

<div id="container">your searchbar here..</div>

该div可以通过以下方式垂直（和水平）对齐：

#container { 
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;    
}

如果您只想进行垂直对齐，可以更改：

margin-top: auto;
margin-bottom: auto;

但请注意position: absolute始终与下一个父元素相关，后者获得了position元素。

Answer 2

http://jsfiddle.net/rp7ebb1c/1/ reference

＆＃13;

#outer {
  height: 400px;
  overflow: hidden;
  position: relative;
}
#outer[id] {
  display: table;
  position: static;
}
#middle {
  position: absolute;
  top: 50%;
}
/* for quirk explorer only*/

#middle[id] {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  position: static;
}
#inner {
  position: relative;
  top: -50%
}
/* for quirk explorer only */

＆＃13;

<div id="outer">
  <div id="middle">
    <div id="inner">
      <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>
    </div>
  </div>
</div>

＆＃13;

如何垂直对齐对象

2 个答案: