Question

如小提琴here所示，其中包含以下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>

和CSS：

@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 {
  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;
}

如果删除问题的border-style:solid属性，我可以将测试问题置于中心位置。但是，我想知道为什么边框式它没有居中。我尝试使用box-sizing:border-box无济于事。

由于

Answer 1

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

.question > p {
   margin: 0;
}

或

p {
   margin: 0;
}

请参阅我更新的小提琴here

Answer 2

p元素有默认的边距，因此当父元素上没有边框时，parent-child上的https://our.umbraco.org/projects/backoffice-extensions/leblender/会发生margin collapsing并且该边距不会影响{{1}的位置1}}。但是当你在父元素上设置边框（它可以是任何边框，你可以在这里看到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;
}

Answer 3

尝试将父div显示为table，将p显示为table-cell，然后使用vertical-align。
请参阅以下代码段。

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 4

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

并将段落位置的外部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 5

只需设置p标签的边距0px即可。样品是

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

Answer 6

您可以在此处使用flexbox：

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

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

3。）从.question > p

中删除除border-radius之外的所有其他内容

这是一个小提琴：https://jsfiddle.net/35jhjqcx/

边界

6 个答案: