Сложное вертикальное центрирование для гуру CSS (не могу коснуться HTML)

ProgramBox

Сложное вертикальное центрирование для гуру CSS (не могу коснуться HTML)

Post author:admin
Запись опубликована:3 февраля, 2023
Post category:Вопросы по программированию

#css #positioning #vertical-alignment

#css #позиционирование #выравнивание по вертикали

Вопрос:

Я пытаюсь центрировать эти изображения по вертикали. Я не могу изменить свой HTML. Возможно ли это сделать? вот скрипка: http://jsfiddle.net/EAGQH/2 / Я также поместил код здесь:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" content="0">
<link media="screen" type="text/css" href="css.css" rel="stylesheet">
</head>

<body>
<ul class="photo-grid">
<li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
    <li class="photo">
<a href="${photo-link}" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/150x200" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
 <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/200x150" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
        <li class="photo">
<a href="http://placehold.it/200x150" class="photo-link">
<img src="http://placehold.it/150x200" class="photo-img">
<span class="photo-title">Photo</span>
</a>
</li>
</ul>

И вот мой CSS (пока) :

 ul.photo-grid {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 925px;
    }
ul.photo-grid li {
    float: left;
    margin: 10px;
    min-height: 250px;
    width: 200px;
}
ul.photo-grid li:after {
    clear: both;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    display: block;
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    }
ul.photo-grid a {
    display: block;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}
ul.photo-grid img:after {
    clear: both;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    display: block;
    font-size: xx-large;
    height: 0 !important;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}
ul.photo-grid span {display:block;}

Заранее спасибо за вашу помощь.

Ответ №1:

Если вам не нужно перемещать li, вы можете использовать опцию отображения встроенной таблицы, чтобы сделать vertical-align:middle .

Таким образом, css будет выглядеть так для li

 ul.photo-grid li {
    display:inline-table;
    margin: 10px;
    height: 250px;
    width: 200px;
    text-align: center;
    vertical-align:middle !important;
}

Что касается IE6 и 7, они не поддерживают position:table-cell, поэтому вместо этого обходным путем является предоставление контейнеру следующих стилей:

 position:absolute;
top:50%;

а затем дайте детям эти стили

 position:relative;
top:-50%;

Это должно применяться только к IE6 и 7, поэтому либо добавьте таблицу стилей для этого, либо, возможно, используйте встроенный #.

Теперь в вашем примере также необходимо размещать изображения рядом друг с другом слева, поэтому вам нужен внешний контейнер с:

 position:relative;
float:left;

Для этого вы можете использовать свой ‘li’, свой ‘a’ для контейнера с вертикальным выравниванием, а img и span в качестве дочерних элементов (хотя все еще только для ie6 и 7).

Я добавил это в вашу скрипку с помощью встроенных # селекторов — http://jsfiddle.net/EAGQH/69 /

1. Правильно, они не поддерживают table-cell. Обходной путь состоит в том, чтобы установить положение li в относительное и переместить его влево, затем взять <a>, содержащий изображение и диапазон, и расположить его абсолютным и 50% сверху, тогда содержимое должно быть расположено относительно и иметь -50% сверху. Это будет иметь тот же эффект. Я отредактирую ответ и добавлю его в скрипку.