Why does `vertical-align` property NOT work for with `display:table-cell`?

Question

Unlike images, table cells default to middle vertical alignment:

Theoretically, vertical-align supposed to work inside an element with display:table-cell. It always works if you add a wrapper with display:table around. But when it has no wrapper, sometimes it will work and sometimes vertical-align will be completely ignored...

In this SSCCE, a.previous-slide-arrow and a.next-slide-arrow have display: table-cell; and they have a wrapper first-viewport with display:table;, But still vertical-align does not seem to work on a.previous-slide-arrow and a.next-slide-arrow. Why? And what should I do to make it work?

Code:

.image-slideshow-container {
}

.image-slideshow-container img {
 position: fixed;
 display: none;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}

img.slider-image1 {
 display: block;
}

.first-viewport {
 height: 100%;
 width: 100%;
 position: absolute;
 display: table;
}

a.previous-slide-arrow, a.next-slide-arrow {
    width:128px;
    height:128px;
 display: table-cell;
 vertical-align: middle;
 position: relative;
 
 color: transparent;
    
 opacity: 0.7;
 text-align: center; /* =s */
 left: 20px;
 background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
 background-repeat: no-repeat;
}

a.next-slide-arrow {
 right: 20px;
 left: auto;
 background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}

.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
 opacity: 1;
}

.navigation-bullets-container {
 text-align: center;
 margin-top: 20px;
 margin-bottom: 60px;
 display: table-cell;
 vertical-align: bottom;
 position: relative;
}

.navigation-bullets-container span {
 display: none;
}

.navigation-bullets-container a {
 width: 20px;
 height: 20px;
 display: inline-block;
 margin-right: 5px;
 background: #4b4040;
}

.navigation-bullets-container a:hover{
 background: black;
}

.navigation-bullets-container a.active {
 background: black;
}

<div class="image-slideshow-container">
    <img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!"/>
    <img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!"/>
    <img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!"/>
    <img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!"/>
    <img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!"/>
    <img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!"/>
</div>


<div class="first-viewport"> 

 <a class="previous-slide-arrow" href="#">&lt;</a>
    
 <div class="navigation-bullets-container">
  <a class="navigation-bullet1" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
        <a class="navigation-bullet2" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
        <a class="navigation-bullet3" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
        <a class="navigation-bullet4" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
        <a class="navigation-bullet5" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
        <a class="navigation-bullet6" href="javascript: changeImage(1)" > 
            <span>Bullet</span>
        </a>
 </div>
    
 <a class="next-slide-arrow" href="#">&gt;</a>
</div>

Set `background-position: center;` to vertical align the background image. The solution above only work with the content inside the element, not work with `background-image` attribute. — pqdong, Apr 15 '15 at 08:15

Bluety · Answer 1 · 2015-04-15T08:24:19.977

2

If you want listen click event only on the arrow :
You must wrap your <a> element in div with display: table-cell.
And your <a> contain only your background arrow.

Alternatively:
Or you can apply a background-position: 50% 50% to center your background arrow in your element.

edited Apr 15 '15 at 08:24

answered Apr 15 '15 at 08:15

Bluety

1,869
14
22

1

Yeah, in this instance centering the background will do the trick. `vertical-align` has no bearing on the position of the background. – Hidden Hobbes Apr 15 '15 at 08:20
Thank you for your answer. I do intend to listen click event on the arrow, let me test it. – Solace Apr 15 '15 at 09:15

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2 issues :

Height

Your first-viewport has a height of 100%. When you work with % heights, know that the parent must have a height to so the % height of the children can be calculated.

In this case, you have to add html, body {height: 100%;}, which are the parents of first-viewport. (Honestly, it's not mandatory but you should do it as your div could have a zero height on some browsers.)

Background

Now, your <a> tags are actually taking the full height and are centered vertically, but you feel the opposite because of your background.

Blue zone is your a tag real position.

Now what you have to do is fixing your background position (since you're using the background property to display arrows).

a.previous-slide-arrow, a.next-slide-arrow {
    background-position: center;
}

This simple line above should fix it.

Thank you so very much for the elaborate answer. I greatly appreciate the explanation. — Solace, Apr 15 '15 at 09:13

Why does `vertical-align` property NOT work for with `display:table-cell`?

2 Answers2

Height

Background