Question

我如何能够将表格和旁边的div垂直居中？如果两者的容器小于内部内容高度空间，我需要能够滚动。

HTML：

<div id="outer_1">
  <div id="inner_1">
    <form id="form">
      <input/>
      <input/>
    </form>
    <div id="login-request">
      If you do not have a login,
      <span>touch here</span>
    </div>
  </div>
</div>

CSS：

#outer_1 {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-width: 2px;
}

#inner_1 {
  width: 200px;
  height: 100%;
  display: table;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  margin-left: auto;
  margin-right: auto;
}

#form {
  text-align: center;
  vertical-align: middle;
}

#login-request {
  text-align: center;
  vertical-align: middle;
}

请考虑JSFiddle。

Answer 1

难道你不能在两个div上用float:left解决这个问题吗？

JSFiddle：http://jsfiddle.net/4vtf5cn6/6/

添加的行标有**，因此请不要只复制以下代码;）

#outer_1{
    width: 400px;
    height: 400px;
    border-style: solid;
    border-width: 2px;

}

#inner_1{
    **padding-top:30px;
    width: 200px;
    height: 100%;
    display: table;
    border-style: solid;
    border-width: 2px;
    border-color: red;
    margin-left: auto;
    margin-right: auto;
}

#form{
    display: table-cell;
   text-align: center;
   vertical-align: middle;
   **float:left;
}
#login-request{
    display: table-cell;
   text-align: center;
   vertical-align: middle;
   **float:left;
}

<强>结果：

enter image description here

Answer 2

试试这个DEMO

#form{
    display: inline-block;
   text-align: center;
   vertical-align: middle;
}
#login-request{
    display: inline-block;
   text-align: center;
   vertical-align: middle;
}

Answer 3

选项可以是CSS规则的margin-top属性的百分比值。例如：

.container {
  width: 150px;
  height: 200px;
  border: 3px solid orange;
}
.child {
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
  
  /* Center vertically */
  margin-top: 50%;
  
  width: 30px;
  height: 40px;
  border: 3px solid yellowgreen;
}

<div class="container">
  <div class="child"></div>
</div>

Answer 4

试试这个，表格和信息都是水平和垂直中心对齐，看看它 http://jsfiddle.net/4vtf5cn6/10/

<div id="outer_1">
  <div id="inner_1">
    <form id="form">
      <input/>
      <input/>
      <div id="login-request" class="login-request-alert">
        If you do not have a Travelport Mobile Agent login,
        <span class="urlink">touch here</span>
      </div>
    </form>
  </div>
</div>

#outer_1{
    width: 400px;
    height: 400px;
    border-style: solid;
    border-width: 2px;
}
#inner_1{
    padding-top:30px;
    width: 200px;
    height: 100%;
    display: table;
    border-style: solid;
    border-width: 2px;
    border-color: red;
    margin-left: auto;
    margin-right: auto;
}
#form{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float:left;
}
#login-request{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    float:left;
}

Answer 5

最简单的方法是添加<div>，其中包含#form和#login-request。像：

<div id="outer_1">
    <div id="inner_1">
        <div id="enclose">
            <form id="form">
                <input/>
                <input/>
            </form>
            <div id="login-request" >
                If you do not have a login,
                <span>touch here</span>
            </div>
        </div>
    </div>
</div>

并在CSS中：

#enclose {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow-y: auto;
}

并根据需要设置#form和#login-request的样式

用CSS中心两个元素

5 个答案: