gpt4 book ai didi

javascript - 如何让
垂直居中?

转载 作者:行者123 更新时间:2023-11-28 03:44:23 26 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
What's The Best Way of Centering a Div Vertically with CSS

这可能是 CSS 问题,也可能是 JavaScript 问题,也可能是 HTML 问题。

如何垂直居中?

我已经成功地水平对齐了一个 Div 对象。我是这样做的。我得到了我想要居中的对象的宽度和高度(XAML 代码)

<Grid  Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">

然后,在托管 silverlight 控件的 html 文件中,我这样做了:

<div id="silverlightControlHost" style="width:738px; height: 300px;  margin-top:auto; margin-bottom:auto;   margin-left: auto; text-align:center; margin-right: auto;">

这会使控件在网页顶部水平居中。

现在,我该如何垂直居中呢?

我尝试申请 this code

没有成功

这是我的整个 html 代码:

<!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

[img]http://cdn.css-tricks.com/wp-content/uploads/2007/11/centered.gif[/img]

    <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;">

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com