CSS vertical-align：middle不工作 [英] CSS vertical-align: middle not working

问题描述

我试图在另一个 div中垂直居中 span 或 div 元素。但是，当我把 vertical-align：middle 时，没有任何反应。我尝试改变这两个元素的显示属性，没有任何效果。

正在我的网页中执行：

 < div class =main> 
< div class =inner>此框应在较大的框中居中
< / div> 
  

使用CSS：

  .main {
 height：72px; 
 vertical-align：middle; 
 border：1px solid＃000000; 
 padding：2px; 
} 
 
 .inner {
 
 vertical-align：middle; 
 border：1px solid＃000000; 
} 
 
 .second {
 border：1px solid＃000000; 
} 
  

这里是一个jsfiddle的实现，显示它不工作： a href =http://jsfiddle.net/gZXWC/> http://jsfiddle.net/gZXWC/

解决方案

div>

这似乎是最好的方式 - 从我的原始帖子已经过去了一段时间，这是现在应该做的： http： //jsfiddle.net/m3ykdyds/200

  / * CSS档案* / 
 $ b b。main {
 display：table; 
} 
 
 .inner {
 border：1px solid＃000000; 
 display：table-cell; 
 vertical-align：middle; 
} 
 
 / * HTML文件* / 
< div class =main> 
< div class =inner>这< / div> 
< / div> 
  

您也可以使用以下方式：

使用CSS3：

 <！ -  HTML  - > 
< div class =wrapper> 
< div>嗨< / div> 
< / div> 
 
 / * CSS * / 
 .wrapper {
 display：flex; 
 align-items：center; 
} 
  

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:

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

with CSS:

.main {
    height: 72px;
    vertical-align: middle;
    border: 1px solid #000000;
    padding: 2px;
}

.inner {

   vertical-align: middle;
 border: 1px solid #000000;    
}

.second {
     border: 1px solid #000000; 
}

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>

You can also use the following:

Using CSS3:

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}

这篇关于CSS vertical-align：middle不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！