OL Learn

Vertical alignment in a div


Hello all,

I have in my page design an absolute box displaying as table-cell containing a piece of snippet (selecting by ID) and I want to center vertically the text and the vertical-align style property doesn’t work.

Thanks in advance for your help.

Best regards,



Hi Eric,

Typically the display: table-cell only works when you have parent element with display: table;

Consider the following (absolute positioned box in the Print context):

<div anchor="page_media_0"
style="display: table; position: absolute;  overflow: hidden; -moz-box-sizing: border-box; width: 200px; height: 200px; top: 34.2px; left: 34.2px;" offset-x="72" offset-y="72">
    <div style="display:table-cell; vertical-align: middle; text-align: center; height: 100%;">
        <span>Lorem ipsum</span>

Note the display: table on the abs box and the child div with display: table-cell;

Hope this helps,



It works fine, thanks



You can also simply set the line-height of the span equal to the height of the DIV, to vertically center text in a box.


Hi Erik,

This isn’t working when I use the Copy fit option. it always displays the largest font.

How can I solve this?




Found the solution:
#container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }

<div id=“container” data-copyfit="{“minSize”:“4pt”,“maxSize”:“16pt”,“widthOnly”:false,“childSelector”:""}" style=“width: 246px; height: 203px;”>
<span id=“content”>@invultekst@</span><span id=“placeholder”>