Попытка получить серую коробку на право выравнивания по центру без добавления полей/дополнения к нему:Другой CSS вертикальное выравнивание

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 
h3 { margin: 0em; padding: 0em; } 
h3 span { margin-left: 0.5em; } 
a { float: right; text-align: right; } 
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; } 
#content { height: 16em; } 
    </style> 
</head> 
<body> 
<div id="frame"> 
<div id="header"> 
<h3><span>Heading</span><a href="#"><span></span></a></h3> 
</div> 
<div id="content"> 
</div> 
</div> 
</body> 
</html>

http://jsfiddle.net/hotdiggity/4yGh8/

источник

2013-02-26 hotdiggity

который серая коробка? маленький? он уже сосредоточен для меня –

Центрировать вертикально в белом ящике? или центрировать его в светло-серой коробке? - Возможно, тег вводит в заблуждение. –

«Серая коробка справа от центра выравнивания ...» в горизонтальном сером ремешке. Это немного не так, но было бы интересно узнать, есть ли способ сосредоточить его идеально. – hotdiggity

Есть несколько разных способов сделать это, но ни один из них не идеален.

Я изменил разметку немного, чтобы сделать его проще писать селекторы:

<div id="frame"> 
<div id="header"> 
<h3><span>Heading</span><span><a href="#"></a></span></h3> 
</div> 
<div id="content"> 
</div> 
</div>

CSS Таблицы

Результат не может быть достаточно, если у вас есть контент, который собирается обернуть:

http://jsfiddle.net/4yGh8/4/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 
h3 { margin: 0em; padding: 0em; display: table; width: 100%; } 
h3 span { display: table-cell; vertical-align: middle; } 
h3 span { padding: 0 0.5em; width: 100% } 
h3 span:last-child { width: 1px; line-height: 1; } 
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

Flexbox

Убедитесь, что вы указали http://caniuse.com/#search=flexbox, чтобы узнать, какие префиксы вам необходимы для выполнения этой работы.

http://jsfiddle.net/4yGh8/6/ (префиксы не включены)

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 

h3 { 
    margin: 0em; 
    padding: 0em; 
    display: flex; 
    width: 100%; 
    justify-items: space-between; 
    align-items: center; 
} 

h3 span { 
    margin: 0 .5em; 
} 

h3 span:first-child { 
    flex: 1 1 auto; 
} 

a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

Абсолютное позиционирование

http://jsfiddle.net/4yGh8/7/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 

h3 { 
    margin: 0em; 
    padding: 0em; 
    position: relative; 
} 

h3 span { 
    padding: 0 .5em; 
} 

h3 span:last-child { 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin-top: -.5em; /* half of the element's height */ 
} 

a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

источник

2013-02-26 14:02:39 cimmanon

2 вещи, которые вы можете сделать.

добавить другую коробку EN предел в ширину, пока ваш блок не находится в середине с поплавком правой
использование маржинального & отступа

источник

2013-02-26 13:21:31

Вам просто нужно добавить position:relative к вашему #frame а затем position:absolute;top:0;bottom:0; margin:auto; на yout #header. Я отредактировал fiddle

источник

2013-02-26 13:21:39 dinodsaurus

Другой CSS вертикальное выравнивание

ответ

CSS Таблицы

Flexbox

Абсолютное позиционирование

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