边防搞砸垂直对齐

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>

除去余量

边防搞砸垂直对齐

回答

相关问题