How do I center a <div> vertically?
Possible Duplicate:
What's The Best Way of Centering a Div Vertically with CSS
This might be a CSS question or it might be a JavaScript question or it might be an HTML question.
How do I center a vertically?
I have managed to horizontally align a Div object. Here is how I did it. I got the width and the height of the object I wanted to center (XAML CODE)
<Grid Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">
Then, in the html file that hosts the silverlight control I did this:
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
That puts the control centered horizontally at the top of the web page.
Now, how do I center it vertically?
I tried to apply this code
And it did not work
Here is my whole html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SilverlightApplicationThree</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// vertical align function
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
$('.silverlightControlHost object').vAlign();
});
</script>
</head>
<body><center>
<form id="form1" runat="server">
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" >
<param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</form>
</center>
</body>
</html>
This fixed the problem. Knowing the height and width of the control, I used this
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
top:50%;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
margin-left: -369px;
left:50%;
margin-right: auto;
margin-top:-150px;
position:fixed;
top:50%;
}
</style>
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-bottom :auto; text-align:center; margin-right: auto;">
怎么样的事情如下？
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
html, body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
background: black;
}
.wrap {
/* Place top of wrap at center of page */
position: absolute;
top: 50%; right: 0; left: 0;
background: white;
}
.inner {
/* Negative margin to bring back up page (half of height) */
margin: -150px auto;
width: 738px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
</html>
上一篇: 如何使一个div垂直居中父div
下一篇: 如何将一个<div>垂直居中？