Vertical Align issue in both chrome and moz

Question

my sole problem is I want to make inside the menu is in the middle of the div, then I tried to insert vertical align since it is already has inline-block style attribute, but i honestly don't know why. Why the other div is the one who taking effect, instead of the one I mean to.

here is my example:

.content{

 width: 100%;
 height: 90%;
}

.middle{

 position: fixed;
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.menu{

 width: 70%;
 height: 80%;
}

.three {

 width: 30%;
}


.six{

 width: 60%;
}

.inline {
 display: inline-block;
}

.h-80{

 height: 80%;
}

.h-100{

 height: 100%;
}

<div class="content middle">
 
 <div class="menu">
  <div class="three inline h-80">
   this is taking effect
  </div>
  <div class="six inline h-100"  style="vertical-align: middle;">
   while I inputing vertical align here
  </div>
 </div>
</div>

you can run the snippet to check the truth of my question, oh and I tried both chrome and moz, both are showing same result. while I am rookie, idk what is happening until 3 hours trying..

your `.middle` is set to `align-items: center;`, meaning first-level children will be aligned in the middle. Put your `.three` outside `.menu` — Nidhin Joseph, Aug 29 '19 at 10:30

score 0 · Answer 1 · answered Aug 29 '19 at 10:43

0

You just remove position: fixed; form the code it gives same as you want

answered Aug 29 '19 at 10:43

Ashish Patidar

16
1

yunzen · Accepted Answer · 2019-08-29T11:21:14.833

vertical-align is a strange CSS property. I added a border around the .inline elements to show the effect.

The second div is align centered to the baseline of the parent container. The first has implied vertical-align: baseline and it adhers to that.

.content{

 width: 100%;
 height: 90%;
}

.middle{

 position: fixed;
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.menu{

 width: 70%;
 height: 80%;
}

.three {

 width: 30%;
}


.six{

 width: 60%;
}

.inline {
 display: inline-block;
  border: 1px solid;
}

.h-80{

 height: 80%;
}

.h-100{

 height: 100%;
}

<div class="content middle">
 
 <div class="menu">
  <div class="three inline h-80">
   this is taking effect
  </div>
  <div class="six inline h-100"  style="vertical-align: middle;">
   while I inputing vertical align here
  </div>
 </div>
</div>

If I put vertical-align:middle to both divs you see, that the containers are both aligned centered, while the content of those divs is not.

.content{

 width: 100%;
 height: 90%;
}

.middle{

 position: fixed;
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.menu{

 width: 70%;
 height: 80%;
}

.three {

 width: 30%;
}


.six{

 width: 60%;
}

.inline {
 display: inline-block;
  border: 1px solid;
}

.h-80{

 height: 80%;
}

.h-100{

 height: 100%;
}

<div class="content middle">
 
 <div class="menu">
  <div class="three inline h-80" style="vertical-align: middle">
   this is taking effect
  </div>
  <div class="six inline h-100"  style="vertical-align: middle;">
   while I inputing vertical align here
  </div>
 </div>
</div>

You need to set the alignment of the content to center as well. This, alas, cannot be made done with the same technique. For this I would use flexbox with display: inline-flex; align-items: center. For alternatives, take a look at this question: How do I vertically align text in a div?

.content{

 width: 100%;
 height: 90%;
}

.middle{

 position: fixed;
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.menu{

 width: 70%;
 height: 80%;
}

.three {

 width: 30%;
}


.six{

 width: 60%;
}

.inline {
 display: inline-flex;
  align-items: center;
  border: 1px solid;
}
.inline span {
  vertical-align: middle;
}
.h-80{

 height: 80%;
}

.h-100{

 height: 100%;
}

<div class="content middle">
 
 <div class="menu">
  <div class="three inline h-80" style="vertical-align: middle">
   this is taking effect
  </div>
  <div class="six inline h-100"  style="vertical-align: middle;">
   while I inputing vertical align here
  </div>
 </div>
</div>

And to further adjust: You could drop the inline-block altogether and just use flexbox everywhere

.middle, .menu, .three, .six {
  display: flex;
  align-items: center;
}

.content {
  width: 100%;
  height: 90%;
}

.middle, .menu, .three, .six {
  display: flex;
  align-items: center;
}

.middle {
  position: fixed;
  justify-content: center;
  flex-direction: column;
}

.menu {
  width: 70%;
  height: 80%;
}

.three {
  width: 30%;
  background-color: gold;
}

.six {
  width: 60%;
  background-color: silver;
}

.h-80 {
  height: 80%;
}

.h-100 {
  height: 100%;
}

<div class="content middle">

  <div class="menu">
    <div class="three h-80" style="vertical-align: middle">
      this is taking effect
    </div>
    <div class="six h-100" style="vertical-align: middle;">
      while I inputing vertical align here
    </div>
  </div>
</div>

@hek I added an all-flexbox example to the end of my answer – yunzen Aug 29 '19 at 11:21 — yunzen, Aug 29 '19 at 11:21

score 0 · Answer 3 · answered Aug 29 '19 at 10:48

.menu{
    width: 70%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.three{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 30%;
}

.six{
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}

and remove that vertical align.

Vertical Align issue in both chrome and moz

3 Answers3