Html 垂直对齐被边框弄乱了_Html_Css

Html 垂直对齐被边框弄乱了

html css

Html 垂直对齐被边框弄乱了,html,css,Html,Css,如下图所示，使用以下HTML： <body> <div class="main_container"> <div class="question"> <p>Test question here</p> </div> <input class="answer" type="text"> <input class="submit"

如下图所示，使用以下HTML：

  <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>

如果我删除了问题的

边框样式：solid

属性，我就能够使测试问题居中。但是，我想知道为什么边框样式不居中。我尝试过使用

框大小：边框框

但没有效果

谢谢

尝试将父

div

显示为

表格

，将

显示为

表格单元格

，然后使用

垂直对齐

。
请参阅下面的代码片段

@import'https://fonts.googleapis.com/css?family=Open+无；
身体{
文本对齐：居中；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
//背景色：rgba（0150250,0.75）；
}
.问题{
边框：2em实心rgba（0150250.75）；
背景色：白色；
边界半径：1.618em；
保证金：5em自动；
宽度：75%；
高度：10公分；
显示：表格；
}
.问题p{
边界半径：1.618em；
位置：相对位置；
显示：表格单元格；
垂直对齐：中间对齐；
}
.答复{
字号：1.618em；
边界：0；
边界半径：1.618em；
宽度：50%；
保证金：自动；
}


这里的试题

将内部段落位置更新为绝对位置并删除边距

并将段落位置的外部div更新为相对

看工作小提琴

您的垂直对齐混乱，因为浏览器在p标记中应用了上下边距，如果您将其删除，这将解决您的问题

.question > p {
   margin: 0;
}

或

查看我更新的小提琴

只需设置p标签的边距0px。样本是

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

您可以在此处使用flexbox：

1.）添加

显示：flex和弯曲方向：列至。问题

2.）添加页边距：自动0至。问题>p

3.）从中删除除边界半径以外的所有内容。问题>p

这里有一个小提琴：
在p
元素上默认有边距，所以当父元素上没有边框时，发生的事情在父子元素上，边距不会影响p
的位置。但当您在父元素上设置边框（可以是您在这里看到的任何边框）时，可以防止边距塌陷，现在您可以在p
元素上看到边距
因此，一种解决方案是从p


@import'https://fonts.googleapis.com/css?family=Open+无；
身体{
文本对齐：居中；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
//背景色：rgba（0150250,0.75）；
}
.问题{
边框样式：实心；
边框颜色：rgba（0、150、250、0.75）；
边界宽度：2米；
背景色：白色；
边界半径：1.618em；
保证金：5em自动；
宽度：75%；
高度：10公分；
}
.问题>p{
背景色：红色；
边界半径：1.618em；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.答复{
字号：1.618em；
边界：0；
边界半径：1.618em；
宽度：50%；
保证金：自动；
}
p{
保证金：0；
}

这里的试题

.question > p {
   margin: 0;
}

p {
   margin: 0;
}

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