Вертикально выровнять вложенный div

Я искал какое-то решение этого времени. Я пробовал много методов, в том числе table-cell, top: 50%, придавая контейнеру фиксированную высоту и пытаясь центрировать div 1 внутри него ... Ничто не работает, не испортив размер двух внутренних div.Вертикально выровнять вложенный div

Я не хочу, чтобы это было относительно ширины окна просмотра, потому что фон страницы будет фиксированным, и я хочу, чтобы логотип находился в фиксированном положении по изображению, но решения Я пробовал (50% и более), чтобы логотип был центрирован независимо от размера окна просмотра. Я предполагаю, что здесь мне нужно установить фиксированную высоту на теле, но я не уверен. Есть идеи?

<body> 
<div id="logowrap"> 
    <div id="outerlogo"> 
     <div id="innerlogo">LOGOHERE</div> 
    </div> 
</div> 
</body>

CSS:

#logowrap{ 
    margin: auto; 
    display: block; 
    width:300px; 
} 

#outerlogo{ 
    background-color: rgba(255,255,255,0.9); 
    border: 2px solid #656565; 
    position: absolute; 
    display: table; 
    width: 250px; 
    height: 50px; 
    padding: 20px; 
} 

#innerlogo{ 
    background-color: rgba(255,255,255,1); 
    border: 2px solid #656565; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    padding: 30px; 
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; 
}

источник

2015-07-04 Whitedaemon

Jsfiddle это пожалуйста ... –

Все кажется прекрасным, я проверил ваш код и все выровнено отлично –

http://jsfiddle.net/56hbevke/ это не то, что вы ищете? Не понимаю, что у вас есть. Не могли бы вы пояснить. – natejd04

#logowrap { 
 
    width:300px; 
 
    height:130px; 
 
    position:fixed; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-65px; 
 
    margin-left:-150px; 
 
} 
 
#outerlogo { 
 
    background-color: rgba(255, 255, 255, .9); 
 
    border: 2px solid #656565; 
 
    position: absolute; 
 
    display: table; 
 
    width: 250px; 
 
    height: 50px; 
 
    padding: 20px; 
 
} 
 
#innerlogo { 
 
    background-color: rgba(255, 255, 255, 1); 
 
    border: 2px solid #656565; 
 
    text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 30px; 
 
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; 
 
}

<body> 
 
    <div id="logowrap"> 
 
     <div id="outerlogo"> 
 
      <div id="innerlogo">LOGOHERE</div> 
 
     </div> 
 
    </div> 
 
</body>

Попробуйте это. Внутренние размеры divs были указаны с px, поэтому создание #logowrap фиксированное положение не сломало ничего. Если это то, что вы искали, +1 и принять. Если нет, прокомментируйте.

источник

2015-07-04 06:10:18

Привет, извините, я пытаюсь центрировать логотип по вертикали. Он уже расположен по горизонтали, но я не могу добраться до середины страницы без форматирования, становясь чрезвычайно странным. Спасибо за ваш ввод – Whitedaemon

С предоставленным кодом он выравнивается по вертикали (см. Фрагмент в полноэкранном режиме) тоже, а не только по горизонтали. –

Вертикально выровнять вложенный div

ответ

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