如何將容器中的行垂直居中？

-4

我試圖把margin-top：auto;和margin-bottom：auto;但不起作用。另外vertical-align：middle;也不起作用。

有沒有簡單的解決辦法呢？

由於

.container { 
 
background-color:black; 
 
height: 100px; 
 
} 
 

 
.row { 
 
background-color:#fff; 
 
height: 50px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    </div> 
 
</div>

來源

2017-03-07 suonpera

請向我們顯示您的代碼 – ZimSystem

哥們這是在stackoverflow中更常見的問題。至少搜索一段時間。 –

我一直在尋找其他解決方案，但它們並沒有針對bootstrap中的行。 – suonpera

設置寬度和高度爲行和

.row { 
    margin: 0 auto; 
}

來源

2017-03-07 10:58:02

這是爲了水平對齊，而不是垂直 –

基本上，這question is a duplicate。 Bootstrap在這個問題中有各種各樣的定位方法。這將專門用於內的row您的場景。這裏有兩個不同的方法..

// method 1 flexbox 
.container-flex { 
    display: flex; 
    align-items: center; 
} 

// method 2 translatey 
.v-center { 
    position: relative; 
    transform: translatey(-50%); 
    top: 50%; 
}

http://www.codeply.com/go/b6wTQTzoe1

來源

2017-03-07 11:05:48 ZimSystem

呦可以使用flexbox這個

.row { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

來源

2017-03-07 11:07:48

<div class="inner"> 
    <p> 
     Text 
    </p> 
</div> 

.inner { 
    height: 200px; 
    width: 300px; 
    background: orange; 
    vertical-align: middle; 
    display: table-cell; 
}

「文本」應垂直對齊。顯示錶格單元格與垂直對齊工作。我認爲應該可以用inline-elements來做到這一點。

來源

2017-03-07 11:08:08

如何將容器中的行垂直居中？

回答

相關問題