CSS /引导：文本垂直居中对齐

我有一个使用引导程序的webproject。有两列的布局。左栏有一个图像，右栏有一个文本。文本应该垂直居中对图像。第一个问题是让列高度相同。我发现了以下工作方案：CSS /引导：文本垂直居中对齐

.col { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    height:100%; 
}

来获取文本垂直居中我插入右排在下面的HTML：

<div class="table"> 
    <div class="cell">My text</div> 
</div>

CSS：

.table { 
    height:100%; 
    width:100%; 
    display:table; 
} 

.cell { 
    display:table-cell; 
    vertical-align:middle; 
    height:100%; 
}

但我不让桌子和它的牢房达到父母的高度100％。位置绝对不工作，因为底部：0是99999px;

有人有一个想法我可以做什么？谢谢

来源

2016-03-01 anguish

看看[这里]（http://stackoverflow.com/a/489394/4290598）。 – WayneEra

也许使用另一种方法使列的高度相等 - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height –

我认为，如果你可以做到这一点，尝试使用弹性框，而不是固定的网格。

这是你CodePen为例：http://codepen.io/anon/pen/RaNYLG

HTML：

<div class="row"> 
    <div class="column"> 
    <p> Here you have some content.</p> 
    </div> 
    <div class="column"> 
    <p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p> 
    </div> 
</div>

和CSS：

.row{ 
    display:flex; 
} 

.column{ 
    display:flex; 
    width:50%; 
    align-items:center; 
}

（并学习如何正确使用Flex属性：http://flexboxfroggy.com/）

来源

2016-03-01 15:05:00

嗯好的，我会尝试一下如果没有其他解决方案。很好，这个项目刚刚开始。 – anguish

问题是flexbox与“旧”浏览器不兼容？旧的我的意思是 anguish

@anguish您可以检查浏览器与网站上的功能的兼容性http://www.caniuse.com IE10在某种程度上也支持Flexbox – TylerH

CSS /引导：文本垂直居中对齐

回答

相关问题