Невозможно поместить div в центр другого div

Я понятия не имею, почему div с id 'text' автоматически получает высоту и ширину 100%. Я хочу, чтобы он центрировался как div с id 'logo' и дал ему прописку сверху и снизу 77px.Невозможно поместить div в центр другого div

Пожалуйста, помогите.

HTML

<div id="wrapper-1"> 
<div class="divider"></div> 
<div id="logo"> 
    Logo 
</div> 
</div> 
<div id="wrapper-2"> 
<div class="divider"></div> 
<div id="text"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
</div> 
</div>

CSS

body, html{ 
padding: 0; 
margin: 0; 
width: 100%; 
height: 100%; 
background-color: #131316; 
} 

.divider{ 
width: 1px; 
height: 100%; 
background-color: #f9f9f9; 
margin: auto; 
z-index: 1; 
} 

#wrapper-1{ 
width: 100%; 
height: 100%; 
position: relative; 
} 

#logo{ 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
width: 177px; 
height: 177px; 
background-color: #f9f9f9; 
color: #131316; 
z-index: 2; 
} 

#wrapper-2{ 
width: 100%; 
height: 100%; 
position: relative; 
} 

#text{ 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
margin: auto; 
text-align: center; 
background-color: blue; 
}

Вот скрипка - link

источник

2014-12-15 Anonymous

Вы не установили высоту и ширину #text тогда у вас есть для #logo? – Titus

Wrapper-2 имеет ширину и высоту 100%. Также вы не указали никаких значений для текстового div. Переопределите значения для текстового div, и вы должны быть хорошими. Одно предложение: если оба div будут иметь одинаковый размер, создайте еще один класс и разделите его как в div. Это даст вам большую гибкость, и в будущем, если вы хотите обновить значения, вам придется обновлять их только в одном месте. – Rajesh

Нужно ли устанавливать высоту и ширину? Что, если я просто дам ему прокладку со всех сторон? –

Demo

с сс

#text{      //its a div so display block by default, thus width 100% by default. 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    text-align: center; 
    background-color: blue; 
    width:177px; 
    height:177px;   //you need to give width and height here, as to explicitly absolute positioned it with top, left, right, bottom 0 
}

источник

2014-12-15 09:44:22 4dgaurav

вам просто нужно обновить класс #text согласно ниже:

#text { 
position: absolute; 
width: 177px; 
height: 177px; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
margin: auto; 
text-align: center; 
background-color: rgb(0, 0, 255) 
}

источник

2014-12-15 09:45:50 pkachhia

Невозможно поместить div в центр другого div

ответ

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