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 /引導：文本垂直居中對齊

回答

相關問題