How to vertically center align an inline-block element

Question

I know this question has been asked before, but none of the answers have helped me. I have used vertical-align:middle; and line-height:normal; but they don't work. I would like what is inside modal-body div to be vertically center aligned. Thanks for your help. Here is my code:

<div id="modal">
    <div class="modal-header">
      <div class="title">Please leave your feedback!</div>
    </div>
    <div class="modal-body">
      <div class="rate">
    <input type="radio" id="star5" name="rate" value="5" />
    <label for="star5" title="text">5 stars</label>
    <input type="radio" id="star4" name="rate" value="4" />
    <label for="star4" title="text">4 stars</label>
    <input type="radio" id="star3" name="rate" value="3" />
    <label for="star3" title="text">3 stars</label>
    <input type="radio" id="star2" name="rate" value="2" />
    <label for="star2" title="text">2 stars</label>
    <input type="radio" id="star1" name="rate" value="1" />
    <label for="star1" title="text">1 star</label>
     </div>
    </div>
        <input id="submitfeedback" type="submit" value="Submit">
  </div>

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10;
  background-color: white;
  width: 600px;
  max-width: 80%;
  text-align:center;
}

.modal-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.modal-body {
  padding: 10px 15px;
  vertical-align: middle;
  line-height: normal;
}

.rate {
    display:inline-block;
    height: 46px;
    padding: 0 10px;
}

https://css-tricks.com/centering-css-complete-guide/, https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ — CBroe, Apr 22 '20 at 13:45
(Voting to close as “needs more focus”, because centering stuff with CSS in all possible and impossible situations, is a topic that has really been discussed to death multiple times over already.) — CBroe, Apr 22 '20 at 13:46
Does this answer your question? [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — Dionys, Apr 22 '20 at 13:48

score 0 · Answer 1 · answered Apr 22 '20 at 14:09

please try following code may be it can be helpful for you

.modal-body {
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.rate {
    display: inline-flex;
    height: 46px;
    align-items: center;
    padding: 0 10px;
    background: red;
    width: 100%;
    justify-content: space-between;
}

score 0 · Answer 2 · answered Apr 22 '20 at 14:24

.rate, the item inside modal-body is already centered. input boxes and labels inside the rate is not vertically centered because, it doesn't have any styles to make it center. I have made updated your html and added some styles to make it center

.rate{
    height: 46px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div id="modal">
    <div class="modal-header">
      <div class="title">Please leave your feedback!</div>
    </div>
    <div class="modal-body">
      <div class="rate">
        <div class="item">
          <input type="radio" id="star5" name="rate" value="5" />
          <label for="star5" title="text">5 stars</label>
        </div>
        <div class="item">
          <input type="radio" id="star4" name="rate" value="4" />
          <label for="star4" title="text">4 stars</label>
        </div>
        <div class="item">
          <input type="radio" id="star3" name="rate" value="3" />
          <label for="star3" title="text">3 stars</label>
        </div>
        <div class="item">
          <input type="radio" id="star2" name="rate" value="2" />
          <label for="star2" title="text">2 stars</label>
        </div>
        <div class="item">
          <input type="radio" id="star1" name="rate" value="1" />
          <label for="star1" title="text">1 star</label>
        </div>
       </div>
    </div>
    <input id="submitfeedback" type="submit" value="Submit">
  </div>

PS: you can consider below snippet to modify inputs and labels alignment

.item{
  margin: 5px
}
.item *{
  display:inline-block;
  vertical-align:middle;
  padding:0;
  margin:0 5px 0 0;
}

How to vertically center align an inline-block element

2 Answers2