Align элемент, используя его дочерний элемент

Структура HTML выглядит следующим образом:Align элемент, используя его дочерний элемент

<div id="c1"> 
    <div id="c2"> 
    <div id="d1"></div> 
    <div id="d2"></div> 
    </div> 
</div>

Я хочу # c2 быть выровнены по вертикали внутри # c1 таким образом, что # d2 verticaly по центру внутри # c1. Про. Уточнять изображение: enter image description here

Это нормально, если он будет работать только в последнем Chrome. Благодарю.

UPD: Высота # d1 и # d2 не фиксирована. Расстояние между # d1 и # d2 фиксировано.

UPD2: Вы можете забыть о # c2. Я хочу, чтобы # d1 и # d2 размещались один за другим, а # d2 - в центре c1.

источник

2013-05-28 dzhioev

Вы можете использовать CSS 'край' свойства. –

Знаете ли вы, что фиксируется какая-либо высота ящиков? –

Вы хотите выровнять центр # c2 по горизонтали и # d2 вертикально? –

HTML:

<div id="c1" style="height:200px;width:250px;"> 
    <div id="c2" style="height:150px;width:210px;"> 
     <div id="d1" style="height:50px;width:100px;"></div> 
     <div id="d2" style="height:50px;width:100px;"></div> 
    </div> 
</div>

CSS:

div{ 
    border:1px solid #ccc; 
    padding:5px; 
    margin:auto; 
}

Проверьте JSFiddle.

источник

2013-05-28 08:59:13

Использование display:table-cell и vertical-align:midddle на родительском DIV

#c1{ 
    display:table-cell; 
    border:red solid 1px; 
    width:600px; 
    height:300px; 
    vertical-align:middle; 
    text-align:center 
} 
#c2{ 
    border:green solid 1px; 
    width:300px; 
    margin:0 auto 

}

DEMO

источник

2013-05-28 09:00:46 Sowmya

Ваше решение неверно. http://jsfiddle.net/7tvxM/2/ - как видите, # d2 не центрирован. – dzhioev

@dzhioev R u new для html/css ?? Обновлена демо здесь http://jsfiddle.net/7tvxM/3/. Я думал, вы можете это сделать, взяв ссылку родительского div. – Sowmya

И я надеюсь, что вам не нужно вертикальное среднее выравнивание до # c2, если не удалить дисплей: table-cell и vertical-align: midddle. Http: // jsfiddle.нетто/7tvxM/4 / – Sowmya

Итак, наконец я нашел решение сам. Он работает только в Chrome из-за свойств «-webkit- *», но я думаю, что он может быть легко принят для любого современного браузера. Основная идея заключается в использовании преобразования, поскольку преобразование может ссылаться (используя процент) на размеры самого элемента, а не на размеры его родителя. CSS выглядит следующим образом:

div { 
    border: 1px solid; 
} 

#c1 { 
    height: 400px; 
    width: 400px; 
    display: -webkit-flex; 
    -webkit-flex-flow: column; 
    -webkit-justify-content: center; 
    -webkit-align-items: center; 
} 

#c2 { 
    width: 350px; 
    position: relative; 
} 

#d1 { 
    width: 200px; 
    position: absolute; 
    left: 50%; 
    top: -20px; /* distance between #d1 and #d2 */ 
    -webkit-transform: translate(-50%, -100%); 
} 

#d2 { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
}

JSFIDDLE

источник

2013-05-28 13:54:19 dzhioev

Align элемент, используя его дочерний элемент

ответ

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