2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey guys look at how this guys has centered the div in his code :

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

CSS code :

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
 
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}
 
.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}
 
.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    font: 16px/1 Arial, sans-serif;  /* reset the font property */
 
    padding: 5px;
    border: 2px solid black;
}

fiddle here.

can somebody explain why the font: 0/0 a; on .parentbox ?? it seems to be an issue about inline blocks , can somebody enlighten me a bit more about it ? Thanks .

Gautam .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Typo?

I just read through the css3 font module, and if the "a" value exists, I missed it. I suspect it is an error that is simply being ignored, as it should be.

The method you're looking at seems to be a variant on an IE hack we were using ~10 years ago. See http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

made for some interesting reading ..

that made for some really interesting reading ..