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

Question

JSFiddle SSCCE here

来自this website：

与图片不同，表格单元格默认为中间垂直对齐：

来自text of this question，

理论上，vertical-align 应该在一个元素内部工作 显示：表格单元格。如果你添加一个包装器，它总是有效的 显示：桌子周围。但是当它没有包装器时，有时它会 工作，有时会完全忽略垂直对齐...

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

---

代码：

.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%。当您使用 % 高度时，请知道父级必须有一个高度，以便可以计算子级的 % 高度。

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

背景

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

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

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

上面这个简单的行应该可以解决它。