Question 45636 in CSS Question posted in
Some basic documentation can be found here.

How to align content inside a div in the middle of the page – CSS

I have this bit of html and i have no idea what to do to make it align in the center. I’ve tried what feels like everything but it doesn’t help that i really have no idea what i’m doing with CSS. My current solution is a band-aid solution with the 40% margin. I want it to be aligned in the center like the rest of my html but have no idea what to write in the .timedisplay CSS. Help is greatly appreciated.

.timedisplay {
  display: inline-flex;
  margin-left: 40.8%;
}


.input1 {
  border-style: hidden;
  font-size: 150px;
  margin-top: none;
  padding: 0px;
  max-width: fit-content;
  font-family: "Times New Roman", Times, serif;
  width: 150px;
  height: fit-content;
  color: #940e0e;
  background-color: #0f2f5f;
}

.colon {
  font-size: 150px;
  color: #940e0e;
  margin-top: 0px;
  margin-bottom: 0px;
}
input[type="text"]:disabled {
  background: none;
  user-select: none;
  margin-top: none;
}
<div class="timedisplay">
      <input
        class="input1"
        id="input1"
        type="text"
        onfocus="clearInput(this)"
        onblur="unclearInput2(this)"
        id="minuter"
        autocomplete="off"
        maxlength="2"
        value="00"
        onkeypress="return event.charCode >= 48 && event.charCode <= 57"
      />

      <p class="colon">:</p>

      <input
        class="input1"
        id="input2"
        type="text"
        onfocus="clearInput(this)"
        onblur="unclearInput(this)"
        id="sekunder"
        autocomplete="off"
        maxlength="2"
        value="00"
        onkeypress="return event.charCode >= 48 && event.charCode <= 57"
      />
</div>

Tried all kinds of align center varitations and margin auto but the contents of the div always stayed all the way to the left.

Tags:

2

Answers


  1. 0

    Here is how you could do it, and if you need your inputs to be arranged in didfferent manner you can always put them in another div and apply style as you wish.

    .timedisplay {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    Login or Signup to reply.
  2. 0

    Css to center conent

    .timedisplay {
    display: flex;
    justify-content: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search