Вертикальное центрирование промежутка в делении

Question

У меня есть div, содержащий span, и я хочу, чтобы span вертикально и горизонтально выровнялся по центру моего div.

Вот скрипка: http://jsfiddle.net/RhNc2/1/

Я пробовал margin:auto на span и vertical-align на div, но это не работает

РЕДАКТИРОВАТЬ: мой div и span не имеют фиксированной высоты,это зависит от содержания, я установил его на скрипке, чтобы показать вам

Answer 1

Вы также можете просто применить эти стили к содержащему <div>. Решение line-height предполагает, что вам нужно отцентрировать только одну строку текста.

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
    text-align:center;
    line-height:50px;
}

Answer 2

Вот оно

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
}

#mySpan{
    display:block;
    text-align:center;
    line-height:50px;
}

И jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/

Редактировать: , так как ваша высота div и span зависит от содержимого, мое решение будетне работает, потому что ему нужна фиксированная высота и только один ряд текста.Просто найдите решение с position:absolute.

Answer 3

Вертикальное выравнивание - сложная задача, и я не знаю, есть ли один проверенный способ.Самая надежная техника, доступная в последние пару лет, - это использование таблицы CSS.Единственным недостатком этого подхода является то, что он может не работать на устаревших браузерах.Тем не менее, по моему опыту, это, вероятно, лучшее общее решение.См. Мой пример ниже:

<style type="text/css">
    #container {    
        display:table;    
        border-collapse:collapse;  
        height:200px;  
        width:100%;
        border:1px solid #000;
    }         
    #layout {    
        display:table-row;   
    }           
    #content {    
        display:table-cell;  
        text-align:center; 
        vertical-align:middle;    
    }           
</style>

<div id="container">    
    <div id="layout">    
        <div id="content"> 
            Hello world! 
        </div>     
    </div>   
</div> 

Вот jsFiddle: http://jsfiddle.net/aGKfd/2/

Есть другая техника, но она не так надежна, как описанная выше.Он включает в себя два контейнера, причем положение внешнего контейнера установлено на относительное, а внутреннее на абсолютное.Используя абсолютное позиционирование на внутреннем контейнере, вы можете приблизиться, но для его правильной настройки требуется некоторая настройка:

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%;     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div> 

Вот jsFiddle: http://jsfiddle.net/6SWPe/

Answer 4

используйте line-height = height: http://jsfiddle.net/RhNc2/8/

Answer 5

Добавьте это в div CSS:

display:table-cell; text-align:center

рабочая скрипка здесь: http://jsfiddle.net/sdoking/DCT85/

CSS:

#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell; 
text-align:center
}

#mySpan {
width:100%;
border:thin blue solid
}

Границы для ясности:)