为什么 `vertical-align` 属性不适用于带有 `display:table-cell` 的 <a>？

Question

Unlike images, table cells default to middle vertical alignment:

来自text of this question,

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...

在这个 SSCCE 中，a.previous-slide-arrow 和 a.next-slide-arrow 有 display: table-cell; 并且它们有一个包装器 first-viewport 和 display:table;，但仍然vertical-align 似乎不适用于 a.previous-slide-arrow 和 a.next-slide-arrow。为什么？我应该怎么做才能让它发挥作用？

代码：

.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>

Answer 1

如果你只想在箭头上监听点击事件:
您必须使用 display: table-cell.
将 <a> 元素包装在 div 中而您的 <a> 仅包含您的背景箭头。

或者：
或者您可以应用 background-position: 50% 50% 使背景箭头在您的元素中居中。

Answer 2

2 个问题：

身高

您的 first-viewport 身高为 100%。当您使用 % 高度时，请知道 parent 必须有一个高度，以便可以计算 children 的 % 高度。

在这种情况下，您必须添加 html, body {height: 100%;}，它们是 first-viewport 的 parent。（老实说，这不是强制性的，但您应该这样做，因为您的 div 在某些浏览器上的高度可能为零。）

背景

现在，您的 <a> 标签实际上占据了整个高度，并且是垂直居中，但由于您的背景，您感觉相反。

现在您要做的是固定背景位置（因为您使用背景属性来显示箭头）。

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

上面这行简单的代码应该可以解决这个问题。

为什么 `vertical-align` 属性不适用于带有 `display:table-cell` 的 <a>？

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

css

displaytag

vertical-alignment

css-tables

身高

背景

为什么 `vertical-align` 属性 不适用于带有 `display:table-cell` 的 <a>？

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

css

displaytag

vertical-alignment

css-tables

身高

背景

为什么 `vertical-align` 属性不适用于带有 `display:table-cell` 的 <a>？