centering contents of a div vertically without using height 100%

Question

hey guys i am trying to center contents of 2 divs vertically , basically the structure that i have is this :

<div>
    <div class="left">
            <span>
             ONCE YOU <br>  
             PICK US, <br>
             YOU WILL <br>
             NEVER <br>
             WANT TO <br>
             GO <br>
             ANYWHERE <br>
             ELSE <br>
            </span>                 
    </div>
    <div class="right">
            <span>Abouts us</span>
            <button class="about-btn"><a href="#">Know More</a></button> 
    </div>
</div>

and the technique i am using is the following , which i picked up from solution from a stackoverflow example :

                   span:after {
                        content:'';
                        height: 100%;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span {
                        display:inline-block;
                        vertical-align:middle;
                        font-weight: 700;
                        letter-spacing: -3px;
                        height: 100%;
                    }

the problem with this solution is that the is not the only content in the div and so its not viable for me to give the span height:100% as if i have to another element that comes after the span and since the span has a height of 100% in element is pushed outside the main container .

fiddle here.

Also another problem is the contents of the <div class="left"> are not vertically centered with this technique .

i am also trying the display:table solution but that seems to be messing up the layout .

can somebody please help me out with this.

EDIT:: i was trying to follow this solution , by hashem .

thank you .

Alex-Z.

@Alexey , the content of `
` are not centered .. but more importantly since i have given the span a height of 100% do u see how the button know more is pushed out of the container ? — Alexander Solonik, Apr 18 '15 at 09:28
@Leo , still need to start learning that ;) but as of now , i'll leave that option .. — Alexander Solonik, Apr 18 '15 at 11:33

Shikkediel · Accepted Answer · 2015-04-18T10:46:15.973

1

Here's how it could be done with a table layout :

http://jsfiddle.net/xe6n14xq/

Identifying the parent a making it a table :

#wrap {
display: table;
width: 100%; // displaying as table makes the content shrink-wrap
}

Then the children can become vertically aligned table-cells :

.right, .left {
height: 500px;
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}

You could also do a vertical transform on the children's content :

http://jsfiddle.net/0sop57yc/

span, .about-btn {
display: block; // Chrome apparently doesn't agree with inline-block here
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

Edit - not sure who added the width: 100% for the table but that was a good fix, thanks.

edited Apr 18 '15 at 10:46

answered Apr 18 '15 at 09:28

Shikkediel

5,195
16
45
77

1

! thanks a ton for trying , but i would like to avoid transforms ... i am thinking more in terms of `display:table` solution , but so far , just can't get things to work ! Thanks ! +1 though . – Alexander Solonik Apr 18 '15 at 09:30
No problem. Display table is sort of a hacky approach though if it's not a data grid. I guess it's considered common practice (again) because of Bootstrap. – Shikkediel Apr 18 '15 at 09:33
1

Browser compatibility is more the reason for its common use, which is a shame really. Vertical alignment without a hint of hack is pretty much impossible in CSS anyway. – Chris Brown Apr 18 '15 at 09:35
Very much true. In that way the web is still partly a paper design (so to speak). – Shikkediel Apr 18 '15 at 09:42
@Shikkediel , the contents of `
` are not aligned vertically , is that how its meant to be ?
– Alexander Solonik Apr 18 '15 at 09:43
1

I see what you mean, looks good on Firefox but I'll have to check what's up with Chrome. Added another fiddle in the meantime with table layout by the way. Edit - seems to be an issue with the `span` itself, setting display to block looks like a fix. – Shikkediel Apr 18 '15 at 10:07

centering contents of a div vertically without using height 100%

1 Answers1