当前位置： 文江博客话题详情

如何将
居中垂直？

发布于 2024-12-10 11:22:29 字数 4242 浏览 0 评论 0原文

可能的重复：
将 Div 垂直居中的最佳方式是什么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;">

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

现在，我如何将其垂直居中？

我尝试应用 此代码

并且它不起作用

这是我的整个 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>

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

[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;">
原文

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

浅忆流年 2024-12-17 11:22:29

像下面这样的怎么样？

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

How about something like the following?

<!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>
回复 原文
~没有更多了~

关于作者

凉城已无爱

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

此刻的回忆

文章 0 评论 0

leejubao

文章 0 评论 0

不甘平庸

文章 0 评论 0

南巷近海

文章 0 评论 0

未蓝澄海的烟

文章 0 评论 0

gitee_v1qxdSBNo

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文