Javascript 如何将a<；部门>；垂直地_Javascript_Html_Css_Silverlight

Javascript 如何将a<；部门>；垂直地

javascript html css silverlight

Javascript 如何将a<；部门>；垂直地,javascript,html,css,silverlight,Javascript,Html,Css,Silverlight,可能重复：这可能是CSS问题，也可能是JavaScript问题，也可能是HTML问题如何垂直居中我已经设法水平对齐了一个Div对象。我是这样做的。我得到了要居中的对象的宽度和高度（XAML代码）然后，在承载silverlight控件的html文件中，我执行了以下操作： <div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto;

可能重复：

这可能是CSS问题，也可能是JavaScript问题，也可能是HTML问题

如何垂直居中

我已经设法水平对齐了一个Div对象。我是这样做的。我得到了要居中的对象的宽度和高度（XAML代码）

然后，在承载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;">

这将控件水平居中放置在网页顶部

现在，我如何使它垂直居中

我试着申请

但它不起作用

以下是我的全部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>


SilverlightApplicationTree
html，正文{
身高：100%；
溢出：自动；
}
身体{
填充：0；
保证金：0；
}
#silverlightControlHost{
身高：100%；
文本对齐：居中；
左边距：自动；
右边距：自动；
}
$（函数（）{
//垂直对齐功能
$.fn.vAlign=函数（）{
返回此。每个函数（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对象'）.vAlign（）；
});

这解决了问题。知道控件的高度和宽度后，我使用


html，正文{
身高：100%；
溢出：自动；
最高：50%；
}
身体{
填充：0；
保证金：0；
}
#silverlightControlHost{
身高：100%；
文本对齐：居中；
左边距：-369px；
左：50%；
右边距：自动；
利润上限：-150px；
位置：固定；
最高：50%；
}

像下面这样的东西怎么样

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


测试页
html，正文{
位置：相对位置；
保证金：0；
身高：100%；
填充：0；
背景：黑色；
}
.包裹{
/*将包装的顶部放在页面的中心*/
位置：绝对位置；
顶部：50%；右侧：0；左侧：0；
背景：白色；
}
.内部{
/*负页边距，用于恢复页面（高度的一半）*/
保证金：-150px自动；
宽度：738px；
高度：300px；
背景：黄色；
}

像下面这样的东西怎么样

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


测试页
html，正文{
位置：相对位置；
保证金：0；
身高：100%；
填充：0；
背景：黑色；
}
.包裹{
/*将包装的顶部放在页面的中心*/
位置：绝对位置；
顶部：50%；右侧：0；左侧：0；
背景：白色；
}
.内部{
/*负页边距，用于恢复页面（高度的一半）*/
保证金：-150px自动；
宽度：738px；
高度：300px；
背景：黄色；
}

top:50%根本没有移动div top:50%根本没有移动div

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