Vertical alignment in a div

OL Connect Professional Designer
1

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,

Eric,

2

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

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

Hope this helps,

Erik

3

It works fine, thanks

Eric

4

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.

1 Like
5

Hi Erik,

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

How can I solve this?

Regards,

Koen

6

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

HTML:
<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">
</div>