Center inputbox in CSS

Question

I want to center the title input box in CSS. I currently have this code for the class. It has to be in the middle of the parent and an hr line going through the middle.

.answer-title{
    font-size: 40px;
    padding: 10px 30px 10px 30px;
    width: calc( 700px - 120px - 90px );
    color:#149414;
}

I have tried implementing a padding like the answer field in the title field, but the title field doesn't change it's position.

.answer-input{
    color:#149414;
    background-color: black;
    border-color: green;
    padding-top:20px;
    padding-left:20px;
}

According to this guide: https://www.w3.org/Style/Examples/007/center.en.html it is possible to write left: 50%; but that doesn't work in my case. Is there a better way to do it?

Here is the HTML code

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

You have 2 textareas with class answer-input but I can't see any element with class answer-title — A Haworth, Dec 31 '20 at 15:16
Thanks! I didn't see that. I forgot to rename the class name :) — root, Dec 31 '20 at 15:26
Small tip:
's should be replaced with margins in your css and the
can also be replaced with a border-bottom. — Isman F., Dec 31 '20 at 15:28

score 1 · Accepted Answer · answered Dec 31 '20 at 15:18

1

If you want to center either or both, you could add these properties to both elements:

display: block;
margin: 0 auto;

answered Dec 31 '20 at 15:18

karolus

912
7
13

score 1 · Answer 2 · answered Dec 31 '20 at 15:25

Flexbox might help you.

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

score 1 · Answer 3 · answered Dec 31 '20 at 15:32

This code should work for you. You also had a typo. You had class="answer-input" used twice both for input and title. Has just changed it :)

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

Center inputbox in CSS

3 Answers3