为什么vertical-align:middle在我的span或div上不起作用? [英] Why is vertical-align: middle not working on my span or div?

问题描述

我正在尝试将span或div元素垂直放置在另一个div元素内.但是，当我放vertical-align: middle时，什么也没发生.我尝试更改两个元素的display属性，但似乎没有任何效果.

I'm trying to vertically center a span or div element within another div element. However when I put vertical-align: middle, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.

这是我目前在网页上所做的:

This is what I'm currently doing in my webpage:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

这是该实现的jsfiddle，表明它不起作用: http://jsfiddle.net/gZXWC/

Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/

推荐答案

这似乎是最好的方法-自从我的原始帖子以来已经过去了一段时间，现在应该这样做:

This seems to be the best way - some time has passed since my original post and this is what should be done now: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

这篇关于为什么vertical-align:middle在我的span或div上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！