Question

<div class="parent">
    <div class="left-child">
        <img src="logo.jpg" alt="logo">
    </div>
    <div class="right-child">
        <form action="#">
            <input type="text" value="search">
        </form>
    </div>
</div>

当right-child徽标高度增加时，我想垂直居中left-child表格。

有人能帮助我吗？

PS：用户将上传徽标。所以我不知道徽标的高度。

Answer 1

我创建了一个新的div，以垂直方式适合您的表单。我希望它有效。我修复了图像宽度，但是，你可以删除它。 http://jsfiddle.net/BfZFJ/

你的CSS：

.parent {
    border: 1px dashed red;
    display: table;        
    overflow: auto;
  }

  .left-child img {
    width: 50px;
    height: 50px;
  }

  .left-child {
    border: 1px dashed blue;        
  }

  .right-child {
    border: 1px dashed green;
    display: table-cell;
    vertical-align: middle;                        
  }

  #your_form {
    margin: 0 auto;
    width: 200px;
  }

你的HTML：

<div class="parent">
    <div class="left-child">
        <img src="icons.jpg" alt="logo" />
    </div>
    <div class="right-child">
        <div id="your_form">
          <form action="#">
              <input type="text" value="search" />
          </form>            
        </div>            
    </div>
</div>

拥抱， VIN。

Answer 2

如果您的div为vertical-align: middle，则可以使用display: inline-block，但如果您使用的是浮点数，则可以使用.left-child, .right-child { display: inline-block; vertical-align: middle; }：

inline-block

http://jsfiddle.net/mblase75/mugGY/

但请注意，{{1}}为not supported in older browsers like IE7

Answer 3

HTML：

<div class="parent">
    <div class="left-child">
        <div><img src="logo.jpg" alt="logo" /></div>
    </div>
    <div class="right-child">
        <form action="#">
            <input type="text" value="search1" /><br/>
            <input type="text" value="search2" /><br/>
            <input type="text" value="search3" />
        </form>
    </div>
</div>

CSS：

.parent {
    height: 400px;
    width: 100%;
    position: relative;
}

.left-child {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
}
.left-child div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.right-child {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
    left: 50%;
}

.right-child form {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Credits

Fiddle

Answer 4

将来更好的答案将是使用弹性盒模型

这是支持您所需内容的CSS http://jsfiddle.net/BfZFJ/1/

.parent {
    /* Use flex box layout to layout its children */
    display: box;
    /* Vertically center its children */
    box-align: center;    
}    

.right-child {
    /* The child on the right will take up all the remaining horizontal space */
    box-flex: 1;
}

/* Don't have to do anything to left-child, it automatically takes up its natural size */

请注意，在现实世界中（目前），您需要使用供应商前缀：

display：[ - webkit-box，-moz-box]
-webkit-box-flex，-moz-box-flex
-webkit-box-align，-moz-box-align

垂直居中以div为形式

4 个答案: