Timothy Fisher Timothy Fisher - 3 months ago 6
CSS Question

Vertical align a DIV along another DIV

I'm using Bootstrap and have re-created my problem here:

https://jsfiddle.net/nxkzxd2b/1/

I have tried:

.square1 {
vertical-align: middle;
}




.square1 {
background-color: red;
display: inline-block;
width: 100px;
}

.square2 {
background-color: blue;
display: inline-block;
width: 300px;
height: 300px;
}

<div class="container">
<div class="square1">
<p>
Div vertical center
</p>
</div>
<div class="square2">
<p>
Text normal
</p>
</div>
</div>





I want to vertical align the red box along the blue box. I don't have a fixed height for the container. How can I go about doing this?

Answer

If you want to have your div's vertical aligned in the middle, you need to apply vertical-align: middle; to both of your elements.

CSS

.square1 {
  vertical-align: middle;
}

.square2 {
  vertical-align: middle;
}

Result

enter image description here

.square1 {
  background-color: red;
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}

.square2 {
  background-color: blue;
  display: inline-block;
  width: 300px;
  height: 300px;
  vertical-align: middle;
}
 
<div class="container">
  <div class="square1">
    <p>
      Div vertical center
    </p>
  </div>
  <div class="square2">
    <p>
      Text normal
    </p>
  </div>
</div>

JSFiddle