HTML - How to center an element when its parent element sets "display: table"?

Jin
April 5, 2023
259 views
3 votes
3 Answers

I use a table view to align my form. At the same time, I hope that the submission button is in the middle of the form, but the browser always seems to put it in the middle of the table cell.

form {
  display: table;
}
form > div {
  display: table-row;
}
form > div > label {
  display: table-cell;
  padding-right: 10px;
}
form > input[type="submit"] {
  display: block;
  margin: auto;
}

<form>
  <div class="user-name">
    <label for="user-name">User Name</label>
    <input type="text" name="user-name" id="user-name" />
  </div>
  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
  </div>
  <input type="submit" />
</form>

Tags: css html

Answers

Here is a solution using Flex instead of Table! I believe flex may be a more viable option for what you are trying to achieve because it offers more flexibility as far as orienting & aligning content.

form {
  display: inline-flex;
  flex-direction: column;
}

.user-name,
.password {
  display: flex;
  justify-content: flex-end;
}

form > div > label {
  padding-right: 10px;
}

form > input[type='submit'] {
  display: block;
  margin: 10px auto;
}

<form>
  <div class="user-name">
    <label for="user-name">User Name</label>
    <input type="text" name="user-name" id="user-name" />
  </div>
  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
  </div>
  <input type="submit" />
</form>

This would be display: table version. Your margin does not work in a table. Additionally, there’s no colspan available. Therefore you have to position: absolute a child and span it the whole width (or in your case, center it with left and transform).

So either use a real <table> OR – as it’s 2023 – use flexbox or the newer css grid.

form {
  display: table;
}
form > div {
  display: table-row;
}
form > div > label {
  display: table-cell;
  padding-right: 10px;
}

.submit-btn {
  position: relative;
}

form input[type="submit"] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<form>
  <div class="user-name">
    <label for="user-name">User Name</label>
    <input type="text" name="user-name" id="user-name" />
  </div>
  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
  </div>
  <div class="submit-btn"><span>&nbsp;</span><input type="submit" /></div>
</form>

.user-name,
.password {
    width: 250px;
    padding: 5px;
}

.user-name input,
.password input {
    float: right;
}
.submitButton {
    width: 250px;
    padding: 5px;
    display: flex;
    justify-content: center;
}

<form>
            <div class="user-name">
                <label for="user-name">User Name</label>
                <input type="text" name="user-name" id="user-name" />
            </div>
            <div class="password">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" />
            </div>
            <div class="submitButton">
                <input type="submit" />
            </div>
        </form>

As the code above you can change your display style and add more form elements just like this and this will give the perfect look, hope this helps, comment if you need anything else.

Please signup or login to give your own answer.

Click here to cancel reply.

HTML – How to center an element when its parent element sets "display: table"?

Answers