Вертикально выровнять в абсолютном div?

Question

Fiddle

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

<div class="main"> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Information_icon.svg"/> 
    <div class="text"><span class="inner-text">this is some text</span></div> 
</div> 

Мне нужно, чтобы изображение и текст были абсолютно расположены и смещены немного сверху и снизу.

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

Никакой изгиб, пожалуйста.

Answer 1

Надеюсь, вы хотите что-то подобное в этом FIDDLE.

Текст по вертикали выровнен по вашему желанию; Вы только что должны указать <div class='text'> - width:100% и text-align:center; Надеюсь, это поможет!

вот пример кода:

.text{ 
    display: block; 
    position: absolute; 
    top: 150px; 
    bottom: 100px; 
    right: 0; 
    left: 0; 
    margin: 0 auto 
    /* */ 
    width:100%; 
    text-align:center; 
} 

** EDIT **

Here's is new code. Я поставил height, например, чтобы 20px так что если вы хотите быть вертикально выравнивать вам просто нужно установить top:50% и margin-top: -10px потому что это половина высоты элемента. Извините за мою ошибку. `

Answer 2

Я не совсем уверен, что вы пытаетесь сделать, @ Разный ответил на то, что вы просили, и это было смещено. Если вы хотите, чтобы они были вертикально выровнены по середине, вы могли бы сделать это таким образом.

https://jsfiddle.net/emszzgcs/6/

Я добавил еще один DIV для содержания и сделал их действовать, как стол.

.main { 
    height: 100%; 
    width: 100%; 
    background: pink; 
    display: table; 
} 

.main-content { 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    vertical-align: middle; 
}