Подтвердить что ты не робот

CSS: текст центра как горизонтальный, так и вертикальный?

Я создаю новый веб-сайт, и мне нужно что-то знать (покажем пример).

Скажем, я сделал это:

HTML;

<div id="center-in-bar">
   <ul>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
</div>

и css:

#center-in-bar {
   list-style:none;
   display:inline-block;
   /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}

Что мне делать, чтобы все элементы li были центрированы как по горизонтали, так и по вертикали? В элементе center-in-bar?

Любая помощь была бы appriciated:))

4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте этот фрагмент CSS:

#center-in-bar ul {
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
#center-in-bar li {
    ...
    display:inline; /* you might want to use this instead of "inline-block" */
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}

Ответ 2

Как бы то ни было, для этого не существует стандарта, но, по моему опыту, это, вероятно, самое надежное решение в целом:

<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>

Здесь другой метод, который использует относительное и абсолютное позиционирование для имитации центрированного среднего положения. Этот метод не является точным, но он должен быть совместим с любым браузером (даже с ранними):

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%; /* adjust this as needed */     
        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>

Важное примечание:

Когда этот вопрос задается, кто-то всегда предлагает line-height как решение, но я умоляю вас избегать этого предложения. Это выглядит хорошо, когда вы демонстрируете что-то простое, как "Hello World", но line-height ломается ужасно, когда текст обертывается.

Ответ 3

КАК ГОРИЗОНТРАЛЬНО ЦЕНТРА ДЕТАЛЯ БЛОКА (КАК DIV) ИЛИ ВХОДНЫЙ ДЕТАЛЬ (КАК ТЕКСТ)

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

    body {
     margin:50px 0px; padding:0px;
     text-align:center;
    }

    #Content {
     width:500px;
     margin:0px auto;
     text-align:left;
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;
    }

напишите этот HTML-код для центрирования чего-то горизонтального между тегами тела:

<body>
<div id="Content">I am a centered DIV</div>
</body>

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

    #Content {
     width:500px;
     margin:0px auto;
     text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;

    }

КАК ВЕРТИКАЛЬНО ЦЕНТР ДЕТАЛЯ БЛОКА (КАК DIV) ИЛИ ИНДИНАЦИОННЫЙ ДЕТАЛЬ (КАК ТЕКСТ)

Примечание. Не используйте линейную высоту для элементов с вертикальным центром, так как она будет работать только для одной строки текста и не более того.

Что касается элементов вертикального центрирования, вы можете использовать 3-5 методов в зависимости от того, что вы пытаетесь центрировать.

Этот сайт описывает каждый метод для вас: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Удачи!