Vertically align in an absolute div?

Question

I've checked many SO posts, looked at various vertical align tricks (-50%, table-cell etc) but I still cant figure this one out.

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

I need to have the image and text div absolutely positioned and offset slightly top and bottom.

I can position the image fine, but aligning the text presents an issue. How can I vertically and horizontally align the text?

No flex please.

I don't see any attempts here to vertically center your elements. — cimmanon, Jun 24 '15 at 14:24

score 1 · Answer 1 · answered Jun 24 '15 at 14:31

I'm not exactly sure what you are trying to do, @Raznyy answered what you asked with it being offset. If you want them to be vertically aligned in the middle then you could do it this way.

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

I added another div for the content and made them act like a table.

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

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

Raźnyy · Answer 2 · 2015-06-24T14:32:16.003

0

I hope you want something like in this FIDDLE.

Text is vertically aligned as you want; You just need to give <div class='text'> - width:100% and text-align:center; Hope it helps!

here's sample code :

.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. I set height for example to 20px so if you want it to be vertically align you just need to set top:50% and margin-top: -10px becouse it is a half of element height. Sorry for my mistake. `

edited Jun 24 '15 at 14:32

answered Jun 24 '15 at 14:20

Raźnyy

104
8

Thanks but this text is not vertically aligned. It just has top position of 150px; – panthro Jun 24 '15 at 14:22
@panthro - You said it needs to be offset in your question so this does answer what you are asking. It can't be vertically aligned in the middle and offset. – kel Jun 24 '15 at 14:27

Vertically align in an absolute div?

2 Answers2