Menu
I have a pop up which contains an ASP.NET form, click the link "Request Information" and the form appears.
However, the pages that have the link "Request Information" to trigger the pop up have a lot of content therefore scrolling is required to see the link.
I need to have the div always centered if a user scrolls to read the content, otherwise if they don't scroll the pop up still appears centered on screen.
The div is positioned absolutely, the whole page width is 960px with margin set to 0 auto.
393
CSS Demo: vertical-align The vertical-align property can be used in two contexts: To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text. To vertically align the content of a cell in a table.
you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. img { vertical-align: middle; } In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
If the div has an fixed width and height use: (if width=120px and height=80px)
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
