邊防搞砸垂直對齊

Question

Answer 1

您的垂直對齊被搞砸了，因爲瀏覽器在p標籤應用頂底邊距，如果你刪除它，這將解決您的問題

.question > p { 
    margin: 0; 
}

或

p { 
    margin: 0; 
}

看到我更新的小提琴here

Answer 2

嘗試具有顯示爲table父div和p顯示爲table-cell然後使用vertical-align。
請看下面的代碼片段。

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 

 
body { 
 
    text-align: center; 
 
    width: 100%; 
 
    font-family: 'Open Sans',sans-serif; 
 
    //background-color: rgba(0,150,250,0.75); 
 
} 
 

 
.question { 
 
    border: 2em solid rgba(0,150,250,.75); 
 
    background-color: white; 
 
    border-radius: 1.618em; 
 
    margin: 5em auto; 
 
    width: 75%; 
 
    height: 10em; 
 
    display: table; 
 
} 
 

 
.question p { 
 
    border-radius: 1.618em; 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.answer { 
 
    font-size: 1.618em; 
 
    border: 0; 
 
    border-radius: 1.618em; 
 
    width: 50%; 
 
    margin: auto; 
 
}

<body> 
 
    <div class="main_container"> 
 
     <div class="question"> 
 
     <p>Test question here</p> 
 
     </div> 
 
     <input class="answer" type="text"> 
 
     <input class="submit" type="submit"> 
 
    </div> 
 
    </body>

Answer 3

更新內段位置絕對和刪除邊緣

和更新相對

的段落位置外層div看到工作撥弄link

.question { 
    border-style: solid; 
    border-color: rgba(0,150,250,0.75); 
    border-width: 2em; 
    background-color: white; 
    border-radius: 1.618em; 
    margin: 5em auto; 
    width: 75%; 
    height: 10em; 
    position: relative; 
} 

.question>p { 
    background-color: red; 
    border-radius: 1.618em; 
    top: 50%; 
    margin: 0; 
    transform: translateY(-50%); 
    position: absolute; 
    width: 100%; 
}

Answer 4

只需設置p標籤的頁邊距0px即可。樣品是

.question>p { 
background-color:red; 
border-radius: 1.618em; 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
margin:0px; 
}

Answer 5

您可以使用Flexbox的位置：

1）添加display: flex;和flex-direction: column;到.question

2）添加到margin: auto 0;.question > p。

3）清除一切除外.question > p

這裏邊界半徑是一個小提琴：https://jsfiddle.net/35jhjqcx/

Answer 6

有默認邊距上p元素，所以當有父元素沒有邊界發生了什麼是margin collapsing的parent-child並且該保證金不會影響p的頭寸。但是，如果您在父元素上設置邊框（可以是任何邊框，如您在此處看到的DEMO），則可以防止邊距塌陷，現在可以在p元素上看到邊距。

所以一個解決方案是從p

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 
body { 
 
    text-align: center; 
 
    width: 100%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    //background-color: rgba(0,150,250,0.75); 
 

 
} 
 
.question { 
 
    border-style: solid; 
 
    border-color: rgba(0, 150, 250, 0.75); 
 
    border-width: 2em; 
 
    background-color: white; 
 
    border-radius: 1.618em; 
 
    margin: 5em auto; 
 
    width: 75%; 
 
    height: 10em; 
 
} 
 
.question>p { 
 
    background-color: red; 
 
    border-radius: 1.618em; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.answer { 
 
    font-size: 1.618em; 
 
    border: 0; 
 
    border-radius: 1.618em; 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<div class="main_container"> 
 
    <div class="question"> 
 
    <p>Test question here</p> 
 
    </div> 
 
    <input class="answer" type="text"> 
 
    <input class="submit" type="submit"> 
 
</div>

除去餘量

邊防搞砸垂直對齊

回答

相關問題