-2

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.

mmh4all
  • 1,612
  • 4
  • 6
  • 21
discosteve334
  • 1

2 Answers2

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;
    }
Cvijan Djukanovic
  • 111
  • 6
  • Also, if you would like to learn more about these properties, checkout this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container). – Cvijan Djukanovic Jan 31 '23 at 11:16
-1

Css to center conent

.timedisplay {
    display: flex;
    justify-content: center;
}
sneha shah
  • 75
  • 4