How to align an input field using inline CSS?

Question

I want to centre align an input text box on a webpage and (for certain reasons) I want to use inline CSS only. I tried the following and several other techniques but none worked.

<input type="text" id="myInput" style= "margin: auto; width: 80%;background-repeat: no-repeat;" >

I suspect I am making a conceptual mistake, but I am unable to identify it. Please shed some light.

If required, here is the full code:

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "block";
    } else {
      li[i].style.display = "none";
    }
  }
}

* {
  box-sizing: border-box;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a product.." title="Product Search" style="margin: auto; width: 80%;background-repeat: no-repeat;">

<ul id="myUL">
  <li style="display: none"><a href="#">phones</a></li>
  <li style="display: none"><a href="#">laptops</a></li>
  <li style="display: none"><a href="#">desktops</a></li>
  <li style="display: none"><a href="#">headphones</a></li>
  <li style="display: none"><a href="#">speakers</a></li>
  <li style="display: none"><a href="#">cameras</a></li>
  <li style="display: none"><a href="#">fridges</a></li>
</ul>

without html is difficult to see what's wrong, but try flexbox.... or margin:0 auto; — Sfili_81, Jun 08 '21 at 06:56
@NewUser Thanks! it works now...please could you also explain why this works — Shashwat Tomar, Jun 08 '21 at 06:59
@ShashwatTomar you just need to add display block property the element. For more in details you can go through this link https://developer.mozilla.org/en-US/docs/Web/CSS/display — NewUser, Jun 08 '21 at 07:01
@Sfili_81 `margin: auto` do the same as `margin: 0 auto` (in case of centering, zero top/bottom margin isn't necessary). — pavel, Jun 08 '21 at 07:02
Sorry, I posted answer before I saw that the comments answered it. — see sharper, Jun 08 '21 at 07:03
@ShashwatTomar I have added my answer below. If you think if my solution worked then you can accept the answer. — NewUser, Jun 08 '21 at 07:42

score 2 · Answer 1 · answered Jun 08 '21 at 07:02

2

Add display: block to the element. Without that the auto margin will not work.

answered Jun 08 '21 at 07:02

see sharper

11,505
8
46
65

score 1 · Answer 2 · answered Jun 08 '21 at 07:04

1

display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);

with this your input box will align center.

answered Jun 08 '21 at 07:04

Raj Shaw

51
2

score 0 · Answer 3 · answered Jun 08 '21 at 07:04

You should add display: flex to your container of the input, it will work. It's the best way, trust me. Either way you could play around with some padding-left and transform: translate, but it's highly not recommended to do that, because it's a deprecated and very impractical way to solve that problem.

score 0 · Answer 4 · answered Jun 08 '21 at 07:22

Adding display:block; in the inline styling of input element will solve the issue but its better to just wrap everything in a div and align it by using the display:flex; properties. Flex will give you a lot more control over the positioning of the elements.

Here's an article how to use various display properties

https://www.admecindia.co.in/web-design/display-none-vs-display-block-vs-inline-block-css3-html/

score 0 · Answer 5 · answered Jun 08 '21 at 07:41

Use need to use display: block in your css. So your final html should like this

<input type="text" id="myInput" style= "margin: 0 auto; display: block; width: 80%; background-repeat: no-repeat;" >

To know more about css display property just go through this link

https://developer.mozilla.org/en-US/docs/Web/CSS/display

How to align an input field using inline CSS?

5 Answers5