вертикальное выравнивание не работает - PullRequest
Новая
       20

вертикальное выравнивание не работает

4 голосов
/ 14 декабря 2009

возможно ли выровнять изображение по вертикали внутри тега привязки?

Я использую два тега привязки внутри DIV. Каждый из них должен быть вертикально выровнен по центру. в одном я использую изображение в другом тексте?

PS: без высоты строки

Ответы [ 9 ]

11 голосов
/ 14 декабря 2009

Вертикальное выравнивание не ведет себя так, как вы думаете в div, поскольку оно работает только для ячеек таблицы.

Есть несколько CSS-хаков, чтобы заставить это работать, например этот или этот

5 голосов
/ 10 июля 2012

Попробуйте это: 

div{
    display: table-cell;
    vertical-align: middle;
}
3 голосов
/ 23 сентября 2013

Мне кажется, это работает: 

/* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
3 голосов
/ 14 декабря 2009

Вы не можете выровнять по вертикали внутри тега div, но вы можете с помощью ячейки таблицы. Вы можете обойти это, если сможете зафиксировать высоту вашего изображения и его контейнера.

2 голосов
/ 16 ноября 2011

Решение очень простое с использованием CSS.

Вот пример: 

#anySection {
    background: white url(../images/anyImage.jpg) no-repeat center;
    height: 500px;
    width: 500px
}

Markup: 

<div id="anySection"></div>

Вы получите раздел размером 500 x 500 px с изображением по центру.

1 голос
/ 26 января 2013

У меня была такая же проблема. Это работает для меня: 

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
0 голосов
/ 15 августа 2014 
<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh // Div Body part
     </div>
</div>

Демонстрация скрипки

Попробуйте это.

0 голосов
/ 08 января 2013

Так как никто не указал на это, вы получаете различное поведение в зависимости от DOCTYPE.

(В моем случае переходный тип документа не выравнивал по вертикали встроенные элементы без родственных текстовых узлов, в то время как html5 делает.)

0 голосов
/ 14 декабря 2009

Обратитесь к следующему URL, он может содержать ответы на ваши вопросы, а также дать вам полное представление о свойстве вертикального выравнивания.

http://css -tricks.com / что-это-вертикально-Align /

...