使用inline-block时垂直对齐文本 [英] Vertically align text when using inline-block

问题描述

我一直在寻找几天的答案，没有解决方案似乎是我的需要是正确的。请帮助！

我有两个div，我想填充100％的浏览器宽度，并有更多的这些将堆叠填充的高度。 我要将这些（由JavaScript生成）中的文字垂直对齐。

我也试过使用display：table-cell和它的工作原理在所有方面，但是我没有能力设置单元格的宽度为固定的％，我需要添加html标记，似乎限制我在使用某些

我有麻烦制作一个小提琴，但这是接近： http://jsfiddle.net/z4bj14op/

以下是我的CSS

  html，body {
 margin：0; 
 padding：0; 
 height：100％; 
 overflow-y：hidden; 
 font-family：helvetica; 
} 
 #status {
 width：100％; 
 font-size：0; 
} 
＃line0，＃status0 {
 display：inline-block; 
 width：50％; 
 vertical-align：middle; 
 height：10％; 
} 
 h2 {
 font-size：18px; 
} 
 
＃line0 {
 background-color：＃B36305; 
 color：white; 
} 
＃status0 {
 background-color：black; 
 color：white; 
} 
  

和HTML

 < div id =status> 
< div id =line0>< / div> 
< div id =status0>< / div> 
< / div> 
  

解决方案

您可以试试

 ＃line0 {
 background：pink; 
 width：50％; 
 display：inline-block; 
 float：left; / * added * / 
} 
＃status0 {
 background：red; 
 width：50％; 
 display：inline-block; 
} 
  

演示

I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!

I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.

I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.

How can I vertically align text using inline-block?

Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/

Here is my CSS

html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-y: hidden;
        font-family: helvetica;
    }
    #status {
        width: 100%;
        font-size: 0;
    }
    #line0, #status0 {
        display: inline-block;
        width: 50%;
        vertical-align: middle; 
        height: 10%;
    }
    h2 {
        font-size: 18px;
    }

    #line0 {
        background-color: #B36305;
        color: white;
    }
    #status0 {
        background-color: black;
        color: white;
    }

And the HTML

<div id ="status">
    <div id="line0"></div>  
    <div id="status0"></div>        
</div>

解决方案

You Can try this

#line0{
    background:pink;
    width:50%;
    display: inline-block;
    float:left;/*added*/
}
#status0{    
    background:red;
    width:50%;
    display: inline-block;
}

DEMO

这篇关于使用inline-block时垂直对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！