How to center horizontally in a
?

Question

I have attempted multiple times, with multiple different possible solutions from around Stack Overflow to accomplish this task, yet frustratingly, I cannot seem to be able to center the input box in the div.

My code essentially looks like this at the moment:

div {
  width: 100vw;
  position: relative
}

h1 {
  text-align: center;
}

<div>
  <h1>Title</h1>
  <input type='text'>
</div>

As of the moment, the word "Title" is centered on the screen, but the input box is still on the left hand side.

Is there any way to be able to center the horizontally in the div?

the input box is `display: inline-block` by default. Change that to `display: block` and use `margin: auto` to center it. — Nikhil Nanjappa, May 08 '17 at 12:30
why not just put `text-align:center` on the parent div - would be the simplest solution given the h1 is also centred? — Pete, May 08 '17 at 12:44

score 8 · Accepted Answer · 2019-11-25T13:42:15.143

8

Apply flexbox to the container div.

Note: centring the h1 becomes unnecessary after applying flex

div {
  width: 100vw;
  position: relative;

  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

<div>
  <h1>Title</h1>
  <input type='text'>
</div>

edited Nov 25 '19 at 13:42

answered May 08 '17 at 12:28

Thank you very much, that has done it. I'm not sure why I wasn't able to do it before, but this most definitely works! I'll mark it as the answer as soon as it will let me do so. – LegusX May 08 '17 at 12:37

score 3 · Answer 2 · answered May 08 '17 at 12:28

3

Try this:

 input[type="text"] {
             display: block;
             margin : 0 auto;
        }

Example: Demo

answered May 08 '17 at 12:28

yardie

1,583
1
14
29

score 3 · Answer 3 · answered May 08 '17 at 12:40

3

Display block. input elements are inline.

<input type='text' style="display:block; margin : 0 auto;">

answered May 08 '17 at 12:40

Gergő Tar

56
3

How to center horizontally in a ?

3 Answers3

How to center horizontally in a
?