2

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;">
Community
  • 1
  • 1
xarzu
  • 8,657
  • 40
  • 108
  • 160

1 Answers1

0

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>
Lea Hayes
  • 62,536
  • 16
  • 62
  • 111