CSS вертикальное выравнивание

У меня есть img в floated div, и я не знаю, как центрировать его по вертикали.CSS вертикальное выравнивание

<div style="height: 300px"> 
    <img style="height: 50px" src="something" /> 
</div>

вертикальный вылет: средний конечно не работает.

http://jsfiddle.net/wKQYj/

источник

2011-01-24 anonymous

Два способа, упомянутых в этой статье, были предоставлены уже как отдельные ответы, но вы были бы лучше CSSer, если бы знали, для чего фактически использовался вертикальный выравнивание: http://phrogz.net/css/vertical-align/ – scragz

@scragz - Это хорошая ссылка. Хотя, я бы не использовал 'display: table-cell'. Конечно, я бы не использовал свой предложенный ответ '

'. Ха. – Jason

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg – walv

ответ

вертикально выравнивать текст в родительском элементе, и имейте в виду, что img это инлайн -элементное и так ведет себя аналогично к тексту, вы можете просто установить line-height к height родительского элемента:

div { 
    height: 300px; 
    line-height: 300px; 
}

JS Fiddle demo.

источник

2011-01-24 18:56:31

vertical-align свойство только действительно хорошо на td элементов. Попробуйте что-то вроде:

<table> 
<tr> 
    <td style='height:300px; vertical-align:center'> 
    <img src='something'> 
    </td> 
</tr> 
</table>

ИЛИ, так как вы знаете, высоту и ширину img:

<div style='height:300px;'> 
<img style='height:50px; position:relative; top:50%; margin-top:-25px'> 
</div>

источник

2011-01-24 18:53:47 Jason

ZOMG, ни один из вышеперечисленных мне не подходит, я имею в виду, что в css есть серьезная дыра, они развивают тени и т. Д., И мы должны использовать таблицы еще или на divs в divs, чтобы центрировать по вертикали ... Святая корова. Я должен использовать divs. И я не могу использовать второй код, потому что высота div будет изменена пользователями. Поэтому я потерян. – anonymous

@ anonymous: можете ли вы использовать JavaScript или любые JS-библиотеки (MooTools, Scriptaculous, jQuery, Glow ...)? –

Стиль vertical-align CSS определяет выравнивание текста в его текстовой строке. Это позволяет, например, указать текст в виде верхнего или нижнего индекса.

Таким образом, он фактически не предназначен для вертикального выравнивания элемента внутри коробки.

Существует явное исключение из этого правила, однако - ячейки таблицы (т.е. <td> и <th> элементов) используют vertical-align стиль, чтобы сделать именно это: выравнивание содержимого ячейки внутри клетки.

Это исключение является чем-то вроде причуды - этого действительно не должно существовать. Дизайнеры CSS разместили его там, чтобы позволить CSS воспроизводить атрибут таблицы, который обычно использовался дизайнерами в темные дни табличных макетов.

Для других элементов, выравнивание содержимого коробки вертикально посередине, это может быть немного изобразительного искусства. Есть несколько способов:

Для отдельных строк текста, просто сделать line-height такой же, как высота всей коробки. Для этого вам, вероятно, даже не понадобится vertical-align.
Используйте display:table-cell;, чтобы элемент имитировал ячейку таблицы, а затем используйте vertical-align. Это работает, но может иметь непреднамеренные последствия (есть другие атрибуты ячеек таблицы, которые вы, возможно, не захотите имитировать).
Если вы знаете высоту элемента, который вы хотите вертикального выравнивания, вы можете поместить его на 50% минус половину своей высоты, как это:
```
position:absolute; 
top:50%; 
height:200px; 
margin-top:-100px; /* half the height */ 
```

Есть несколько других, но они должны вас начать.

Надеюсь, что это поможет.

источник

2011-01-24 19:06:49 Spudley

Javascript, вероятно, будет лучше всего получить изображение с центром в вертикальном центре для каждого случая. если вы можете использовать библиотеку jQuery, это всего лишь несколько строк кода.

$(function(){ 
    var containerHeight = $('#container').outerHeight(); 
    var imgHeight = $('#logo img').outerHeight(); 

    var difference = (containerHeight - imgHeight)/2; 
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

источник

2011-01-24 19:12:23 heymrcarter

Значит, ему нужно включить полную библиотеку jQuery, плюс этот скрипт? Кажется, немного переборщил, чтобы что-то сосредоточить. – Jason

, если ему нужно сосредоточиться на чем-то более чем несколько раз, и если он не знает A), какова высота родительского div, а B) какова высота изображения, это будет работать каждый раз и в каждом case – heymrcarter

Для более современного (IE8 +) решения, которое не использует таблицы, мне нравится this one.

<style> 
/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
</style> 

<div class="block"><div class="centered">Centered Content</div></div>

источник

2013-03-08 22:38:07 Justin

Лучшее решение, так как ему не нужно знать высоту содержимого и не использовать css-таблицы. Спасибо, что поделился! – Sygmoral

+1 Умный трюк! Это должен быть принятый ответ ИМО. – Passerby

есть способ сделать это, имея процентную ширину (на самом деле это 100%). –

Довольно cool and modern approach (с заданной высоты):

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

источник

2013-09-08 22:45:11 Agat

Я использую дисплей: свойство коробки:

#container { 
    display: box; 
    box-orient: vertical; 
    box-pack: center; 
} 

#text { 
    vertical-align: middle; 
}

ВИДЕТЬ JS-скрипку здесь: verical align js-fiddle

источник

2014-11-03 10:13:38 Ruwen

Используйте свойство translate, это просто и работает даже в IE:

img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

источник

2015-02-05 22:50:09 yulie

Очень красивый и короткий путь! Благодаря! –

CSS вертикальное выравнивание

ответ

Смежные вопросы