вертикально выровнять img внутри плавающего div

Есть 5 плавающих div s, высота которых растянута до 100% от высоты document с использованием Javascript. Все 5 из них содержат элемент img.вертикально выровнять img внутри плавающего div

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<link type="text/css" rel="stylesheet" href="style.css"/> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
     <div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div> 
    </div> 
</body> 
</html>

Javascript:

//sets columns height to 100%; 
function colsHeight(){ 
     var docHeight = $(document).height(); 
     $("#wrapper div").height(docHeight); 
}; 

$(document).ready(function(){ 
    colsHeight(); 
    });

и CSS:

*{ 
    margin: 0; 
    padding: 0;  
    } 

#wrapper{ 
width: 1000px; 
margin: 0 auto;  
    } 

    #wrapper div{  
     padding: 0 20px; 
     background-color: #9F81F7;   
     float: left; 
     border-right: 1px solid black; 
    } 
    #wrapper img{ 

    } 

div.clear:after{ 
    content: " "; 
    clear: both; 
    }

Я попытался установить родителя divdisplay: table и imgdisplay: table-cell, vertical-align: middle, но не повезло. Определение margin-top: 50% действует не так, как ожидалось.

JSFIDDLE HERE!!!

Любая помощь приветствуется.
Спасибо!

источник

2012-02-14 daniel.tosaba

Почему бы не использовать дисплей: встроенный блок; вместо поплавков? Затем вы можете использовать вертикальное выравнивание «до вашего сердца». – joshnh

Вы уже пробовали это, но безуспешно. Попробуйте отредактировать мой JSFIDDLE и проверить его для себя.Спасибо –

Также, если вы планируете использовать 'display: inline-block;', вы не должны оставлять пробелы между '#wrapper div'. _ _ то есть все на одной строке или без отступов – Hawken

Вы можете установить их абсолютно, а затем установить top: 50% и margin-top: -63px. Конечно, это работает, только если вы знаете высоту изображения (126px в вашем случае). Если размеры изображения являются динамическими, самым простым, но yucky способом было бы установить верхний край на изображениях с помощью js после их загрузки.

Во всяком случае, статический метод можно увидеть здесь: http://jsfiddle.net/3gqcS/2/

источник

2012-02-14 04:49:03

Этот костюм мне подходит лучше всего !! Спасибо всем!!! –

Попробуйте установить столбцы:

position:relative; 
    width:<width>;/* width must be set */

и изображения, как:

position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto 0;

Это должно идеально отцентрировать их, однако затем вам нужно установить ширину столбца, поскольку изображение с абсолютным позиционированием не занимает места вообще.

Кроме того, вместо того, чтобы использовать Java Script просто добавьте:

html, body, #wrapper, #wrapper div{height:100%;}

вместо этого.

Извлеченные из: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

источник

2012-02-14 04:56:41 Hawken

Это не работает, но мне нравится ваш 'не-js-height-set-trick'. Спасибо чувак!!! –

какой браузер вы используете, чтобы он не работал? @ daniel.tosaba – Hawken

выравнивание таким образом не работает. но браузер трюк является удивительным. используя последний chrome & firefox –

, так как вы с помощью JavaScript и JQuery (не могу жить без него), вы можете сделать ....

проверить это: http://jsfiddle.net/828pW/

вот код:

function verticalAlignImage(img) 
{ 
    if(img.height) 
    { 

     $(img).css({ 
      position:'absolute', 
      top: ($(img).parent().height() - img.height)/2 
     }).parent().css('position', 'relative'); 

    } 
    else 
    { 
     setTimeout(function(){ 

      verticalAlignImage(img); 
     }, 100); 
    } 
}

источник

2012-02-14 04:58:47 ygaradon

Спасибо, человек !! Хороший код Javascript! Кто вас узнал? Приветствую! –

Это немного грязно, но вы можете установить высоту линии div на высоту + высоту изображения, а затем переполнение: скрыто

<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">

источник

2012-02-14 05:03:28 rikitikitik

Это неприятный маленький взлом, и мне это нравится. Спасибо чувак!! –

вертикально выровнять img внутри плавающего div

ответ

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