html - 在 div 中垂直居中表单

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：Logo由用户上传。所以我不知道徽标的高度。

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>

拥抱，文。

Answer 2

vertical-align: middle如果您的 div 是，则可以使用display: inline-block，但如果您使用浮点数则不能：

.left-child,
.right-child {
    display: inline-block;
    vertical-align: middle;
}

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

但是，请注意，IE7 等较旧的浏览器不inline-block支持

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

学分

小提琴

Answer 4

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

• http://flexiejs.com/playground/
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes
• http://caniuse.com/flexbox

这是支持您需要的 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 */

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

• 显示：[-webkit-box，-moz-box]
• -webkit-box-flex，-moz-box-flex
• -webkit-box-align，-moz-box-align