为什么`vertical-align`属性不适用于<a> with `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和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

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

<强>可替换地：
或者，您可以应用background-position: 50% 50%将背景箭头置于元素中心。

Answer 2

2个问题：

高度

您的first-viewport高度为100％。当您使用％高度时，请知道父级必须具有高度，以便可以计算子级的％高度。

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

背景

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

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

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

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