Почему свойство `vertical-align` НЕ работает для ‹a› с `display:table-cell`?

JSFiddle SSCCE здесь

С этого сайта:

В отличие от изображений, ячейки таблицы по умолчанию выравниваются по середине по вертикали:

Из текста этого вопроса ,

Теоретически вертикальное выравнивание должно работать внутри элемента с display:table-cell. Это всегда работает, если вы добавите обертку с display:table вокруг. Но когда у него нет обертки, иногда он будет работать, а иногда вертикальное выравнивание будет полностью игнорироваться...

В этом 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>


vertical-alignment css css-tables displaytag
person Solace    schedule 15.04.2015    source источник
comment
Установите background-position: center; для вертикального выравнивания фонового изображения. Приведенное выше решение работает только с содержимым внутри элемента, а не с атрибутом background-image.   -  person pqdong    schedule 15.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

2 проблемы:

Высота

Ваш first-viewport имеет высоту 100%. Когда вы работаете с % высоты, знайте, что родительский элемент должен иметь высоту до, чтобы можно было вычислить % высоты дочерних элементов.

В этом случае вам нужно добавить html, body {height: 100%;}, которые являются родителями first-viewport. (Честно говоря, это не обязательно, но вы должны сделать это, так как ваш div может иметь нулевую высоту в некоторых браузерах.)

Фон

Теперь ваши теги <a> на самом деле занимают всю высоту и расположены по центру по вертикали, но вы чувствуете обратное из-за вашего фона.

Синяя зона – это реальная позиция вашего тега.

Теперь вам нужно исправить положение фона (поскольку вы используете свойство фона для отображения стрелок).

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

Эта простая строка выше должна исправить это.

person Sebastien    schedule 15.04.2015
comment
Большое спасибо за развернутый ответ. Я очень ценю объяснение. - person Solace; 15.04.2015

arrow_upward
2
arrow_downward

Если вы хотите прослушивать событие щелчка только по стрелке:
Вы должны обернуть свой элемент <a> в div с помощью display: table-cell.
А ваш <a> будет содержать только фоновую стрелку.

В качестве альтернативы:
Или вы можете применить background-position: 50% 50%, чтобы центрировать фоновую стрелку в элементе.

person Bluety    schedule 15.04.2015
comment
Да, в этом случае центрирование фона поможет. vertical-align не имеет отношения к положению фона. - person Hidden Hobbes; 15.04.2015
comment
Спасибо за ваш ответ. Я намерен прослушивать событие щелчка по стрелке, позвольте мне проверить это. - person Solace; 15.04.2015