我想在CSS中把标题输入框居中。我目前有这个类的代码。它必须位于父级的中间，一条hr线穿过中间。
.answer-title{
font-size: 40px;
padding: 10px 30px 10px 30px;
width: calc( 700px - 120px - 90px );
color:#149414;
}
我尝试过在标题字段中实现一个填充，比如答案字段，但是标题字段不会改变它的位置。
.answer-input{
color:#149414;
background-color: black;
border-color: green;
padding-top:20px;
padding-left:20px;
}
根据这个指南:https://www.w3.org/style/examples/007/center.en.html，可以将left写成:50；但这在我身上行不通。有没有更好的办法做这件事？
下面是HTML代码
<div class="blogpost">
<textarea name="context" cols="20" rows="1" class="answer-input" maxlength="20" id="id_context">Write a title here...</textarea>
<a class="date-author"></a>
<div class="post-author-wrapper">
</div>
<br>
<br>
<br>
<br>
<hr>
<br>
<div class="blogpost-content">
<textarea name="context" cols="80" rows="10" class="answer-input" maxlength="300" id="id_context">Write an answer here...</textarea>
<br>
<br>
<button class="submit-answer-button">Post your answer</button>
<br>
<br>
</div>
<br>
如果您希望将其中一个或两个元素居中，则可以将这些属性添加到这两个元素中:
null
display: block;
margin: 0 auto;
Flexbox可能会帮到你。
<div class="blogpost">
<textarea name="context" cols="20" rows="1" class="answer-input" maxlength="20" id="id_context">Write a title here...</textarea>
<a class="date-author"></a>
<hr>
<textarea name="context" cols="80" rows="10" class="answer-input" maxlength="300" id="id_context">Write an answer here...</textarea>
<button class="submit-answer-button">Post your answer</button>
</div>
.blogpost {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}
#id_context, button {
margin: auto;
padding: 10px;
}
这个代码应该适合你。
null
.blogpost{
position:relative;
}
.answer-input{
color:#149414;
background-color: black;
border-color: green;
padding-top:20px;
padding-left:20px;
}
.answer-title{
font-size: 40px;
padding: 10px 30px 10px 30px;
width: calc( 700px - 120px - 90px );
color:#149414;
position:absolute;
left:50%;
transform:translateX(-50%);
}<div class="blogpost">
<textarea name="context" cols="20" rows="1" class="answer-title" maxlength="20" id="id_context">Write a title here...</textarea>
<a class="date-author"></a>
<div class="post-author-wrapper">
</div>
<br>
<br>
<br>
<br>
<hr>
<br>
<div class="blogpost-content">
<textarea name="context" cols="80" rows="10" class="answer-input" maxlength="300" id="id_context">Write an answer here...</textarea>
<br>
<br>
<button class="submit-answer-button">Post your answer</button>
<br>
<br>
</div>
<br>