对齐垂直和水平对齐 [英] Align Vertical and Horizontal Align

问题描述

HTML

p>

 < div id =wrapper> 
< header> 
< div id =logoWrapper> 
< div class =logo> Logo Here< / div><！ -  Logo End  - > 
< / div><！ -  Logo Wrapper  - > 
< / header> 
< / div><！ -  Wrapper End  - > 
   

CSS ：

 ！[＃wrapper {
 width：955px; 
 margin：auto; 
} 
 
 html body {
 background：＃F1FF29; 
} 
 
 #logoWrapper {
 width：429px; 
 height：179px; 
 position：absolute; 
 left：50％; 
 top：50％; 
 margin-left：-100px; 
 margin-top：-50px; 
} 
 .logo {
 display：block; 
 background：red; 
 width：429px; 
 height：179px; 
}] 
  

图片： http://i.stack.imgur.com/rZ2ng.png

解决方案

将 #logoWrapper 的边距更改为以下值：

  margin-left：-215px; 
 margin-top：-85px; 
  

他们需要的标志宽度和高度的一半。

jsfiddle

编辑：

此外，我建议您将这些重置样式放入：

  html，body {
 background：＃F1FF29; 
 width：100％; 
 height：100％; 
 margin：0; 
 padding：0; 
} 
  

I am trying to align a box VxH Center but I seem to be getting it just a bit off:

HTML:

<div id="wrapper">
        <header>
            <div id="logoWrapper">
                <div class="logo">Logo Here </div><!-- Logo End -->
            </div><!-- Logo Wrapper -->
    </header>
</div><!-- Wrapper End -->

CSS:

![#wrapper{
    width:955px;
    margin:auto;
}

html body{
    background:#F1FF29;
}

#logoWrapper{
    width:429px;
    height:179px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
}
.logo{
    display:block; 
    background:red;
    width:429px;
    height:179px;
}]

Image: http://i.stack.imgur.com/rZ2ng.png

解决方案

Change your margins for #logoWrapper to these values:

margin-left:-215px;
margin-top:-85px;

They need to be half the width and height of your logo.

jsfiddle

EDIT:

Also, I would suggest you put these 'reset' styles in:

html, body{
    background:#F1FF29;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

这篇关于对齐垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！