Margin:auto won't work even though there is a defined width and block display

Question

rough sketch of what I wantI have a label that I want to center in the page and I have a parent set to 100% width and the actual element set to a block display and the margin set to auto. If I set the element's width to a small value then it does actually center it, however the element stays static as I resize the window when I want it to adapt to the window size. The element I want to center is under the class "label_"

.container {
  display: block;
  width: 100%;
}

.label_ {
  border: 1px solid red;
  display: block;
  color: white;
  z-index: 11;
  margin: 0 auto;
  font-family: "Handlee";
  font-size: 50px;
}

<form>
  <div class="container">
    <label class="label_" for="username">Username</label>
    <input id="username" type="text" placeholder="Username">
  </div>
</form>
<div class="background">
  <img src="background.png" alt="">
</div>
<div class="logo">
  <img id="amongus" src="amongus.png" alt="">

</div>
<div class="red">
  <img id="red" src="an871k4o1sn51.png" alt="">
</div>

Your styles are kind of all over the place. I noticed you have the `.container` div and inside that you have a label and input. Are you trying to get both of them to center? Are you just trying to get the label to center while the input stays pushed to the left? If you can screenshot an example of what you're trying to do, that would help. — HaulinOats, Nov 15 '20 at 19:29

score 0 · Answer 1 · answered Nov 15 '20 at 19:32

Sure you need to set the width of your child element (label). If not, it will be 100% and it will fit all the parent width, instead of being at the center. And you don't need to put display:block for div elements, cause they are already block elements, unless there are global styles that change this behaviour. But if not, less is better, always!

The second thing, I would rather assume that you would like to put your input element outside of your div and also put it in the center. If you want them to be on the one line, then you need to add another extra div, like this

.container{
  width:100%;
  border:1px solid green;
}
.wrapper{
  border:1px solid red;
  width:50%;
  margin:0 auto;
  padding:20px
 }

<div class="container">
    <div class="wrapper">
        <label class = "label_" for="username">Username</label>
        <input id = "username" type = "text" placeholder="Username">
    </div>
</div>

Thanks for the help however when I define a width for the element and resize the window then it just stays in a static position, I'd like the element to be in the center not matter the window size. Also excuse the messy code, these languages are quite new to me. — NicholasM, Nov 15 '20 at 21:39

Margin:auto won't work even though there is a defined width and block display

1 Answers1