I can't center vertically popup_interstitial_table that contains an ads type container.
The fiddle it is autoexplained: http://jsfiddle.net/NomikOS/D8LLM/
jQuery solutions are welcome too.
HTML:
<div id="popup_interstitial">
<div id="parent">
<div id="popup_interstitial_pro_head_text">
Headline text
</div>
<div id="child">
<div id="popup_interstitial_table">
<div id="popup_interstitial_row2">
<div id="popup_interstitial_title"><?php echo $title; ?></div>
<img id="popup_interstitial_image" src="<?php echo $image; ?>">
<div id="popup_interstitial_description"><?php echo $description; ?></div>
</div>
</div>
</div>
</div>
</div>
The related CSS code is:
#popup_interstitial_pro_head_text{
color:#FFF;
font-size: 2em;
font-weight: normal;
text-shadow: 0.05em 0.05em #666;
background-color: #A5CF4C;
width: 100%;
padding-left: 1%;
padding-top: 0.8%;
padding-bottom: 0.8%;
border-top-width: thin;
border-top-style: solid;
border-top-color: #648323;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #759928;
margin-bottom: 2%;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
}
#popup_interstitial {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color:#FFFFFF;
color:#111;
z-index:9999;
top:0;
left:0;
}
#popup_interstitial_table {
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 5%;
vertical-align: center;
}
#popup_interstitial_title{
color:#FFF;
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0 0.3em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #777;
background-color: #888;
border-radius: 0.3em;
}
#popup_interstitial_description{
padding-top: 1.7em;
padding-bottom: 1.2em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #ccc;
line-height:1.5em;
}
#popup_interstitial_image{
vertical-align: baseline;
margin: 25px 20px 3px 0;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
padding: 4px;
margin-left: 6px;
float: left;
}
This is the most important:
#parent {position: relative;}
#child {
padding: 0% 0;
margin: 0 auto;
}
To your current structure, you have two solutions to make it work:
1) CSS
Wrap the elements with a div and use this trick:
See this working Fiddle Example! (If you move the frame up and down, you see that the target stays vertically centered.)
#childWrap { // the new element, the mentioned wrapper
display: table;
width: 100%;
height: 100%;
}
#child { // your element that needs to be restyled
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
#popup_interstitial_table { // the element vertically aligned
width: 50%;
margin: -48px auto 0 auto;
}
What is done here is to set the wrapper element to display as a table, occupying the entire width and height of its parent (#parent).
Then, we can set the #child to display as a table-cell, and set its contents to vertical align at the middle.
Now the trick, since the #parent also contains another element that you need to stay put, but have its height removed from the "center" calculations for the #popup_interstitial_table, we need to pull the #popup_interstitial_table with a margin-top:-60px to fix its position. The negative margin is the height that the #popup_interstitial_pro_head_text occupies.
Important note:
Since you have this structure, in order to pass to the browser the fix, your #popup_interstitial_pro_head_text needs to work with a single unit, I've chosen px for the example.
You had a mixture of % and em on several declarations!
On a side note:
Vertical-align: center;
You use:
vertical-align: middle;
See this link for further information!
2) JQUERY
With jQuery, you can collect the space being occupied by the #popup_interstitial_table and calculate the necessary top and left fix values to keep it vertically centered:
See this working Fiddle Example! (If you move the frame up and down, you see that the target stays vertically centered.)
JQUERY
function center() {
var $target = $('#popup_interstitial_table'),
$header = $('#popup_interstitial_pro_head_text'),
fixTop = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2),
fixLeft = $target.outerWidth(true)/2;
$target.css({
"margin-top": "-" + fixTop + "px",
"margin-left" : "-" + fixLeft + "px"
});
}
$(document).ready(function() {
center();
});
CSS
To prevent massive script calculations, the CSS should get fixed to this:
#parent {
position: relative;
height: 100%; // this was added
}
#child {
padding: 0% 0;
height: 100%; // this was added
}
#popup_interstitial_table {
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
position: absolute; // this was added
top: 50%; // this was added
left: 50%; // this was added
}
So, a repeat that without changing your current structure, this are the two solutions I could think of to center your element!
Use this CSS:
#child {
display: table
}
#popup_interstitial_table {
display: table-cell;
vertical-align: middle;
text-align: center
}
And add your other CSS to it.
See Example of vertical centering
and
CSS: centering things.
I'm not aware of any good way to centre an element vertically without using table cells. In that case, it is rather straightforward, but you go back to table-based layout, which I guess you're trying to avoid.
Question in reply: How important is it for the element to be vertically centred?
Another option is to use javascript to set margins at render-time.
Hi you can achive your result through two easy steps:-
just define display:table-cell & vertical-align:middle to your this id #popup_interstitial_table
#popup_interstitial_table {
background-color: #E7E7E7;
display: table-cell;
font: 0.85em "Trebuchet MS",Arial,Helvetica,sans-serif;
height: 300px;
margin: 5% auto 0;
vertical-align: middle;
width: 450px;
}
see the demo:- http://jsfiddle.net/D8LLM/34/
