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

Question

Возможно ли вертикальное выравнивание изображения, попадающего в якорный тэг?

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

PS: без линии высоты

Answer 1

Вы не может вертикальное выравнивание внутри сНа тега, но вы можете с ячейкой таблицы. Вы можете обойти его, если сможете исправить высоту своего изображения и его контейнера.

Answer 2

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

Есть номера CSS «хаки», чтобы получить, чтобы работать, такие как this one или this one

Answer 3

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

http://css-tricks.com/what-is-vertical-align/

Answer 4

Решение очень просто с помощью CSS.

Вот пример:

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

Markup:

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

Вы получите пикс раздел 500 х 500 с вашим изображением в центре внутри.

Answer 5

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

div{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 6

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

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

Answer 7

Я имел такую ​​же проблему. Это работает для меня:

<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> 

Answer 8

Это, кажется, работает для меня:

/* 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; 

Answer 9

<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> 

Fiddle demo

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