Question

试图找出为什么下面的边缘！重要的线条没有在这个fixedincenter div中居中...我错过了一些明显的东西吗？发布任何可能相关的代码，我想知道容器div中的设置是否干扰了其余部分。

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 10px;
    font-family: verdana, 'trebuchet ms', sans-serif;
    font-size: 12px;
    background-image:url("cork.jpg");
    background-repeat:repeat;
    text-align:center;
    background-attachment: fixed;
}

#container {
    margin: 0 auto;
    width: 350px;
    position: relative;
    display: block;
    text-align: left;
    margin-bottom: 68px;
    margin-top:200px;
    margin-left:425px;
    background: #fff;
    border: 1px solid #777!important;
}

.navheader {
   top: 0px;
   height:34px;
   width:800px;
}

#fixedincenter {
    margin-left: auto!important;
    margin-right: auto!important;
    position:fixed;
}

和HTML

<div id="fixedincenter">  
  <div class="navheader">  
 <table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr>
   <td><a href="/"><img name="JK Header" src="/pix/navbar/top.jpg" width="800" height="34" border="0" alt="Home Page"></a></td>
  </tr>
 </table>
 </div>
 <table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr>
   <td><img name="$MTArchiveTitle$" src="background/background-this_r1_c1.gif" width="800" height="200" border="0" alt="$MTArchiveTitle$"></td>
  </tr>
 </table> 
 <table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr>
   <td><img name="$MTArchiveTitle$_bottum" src="background/background-this_r2_c1.gif" width="800" border="0" alt="$MTArchiveTitle$"></td>
  </tr>
 </table>
 </div>

Answer 1

要添加@ Sachin的答案，另一个选项是以下选项，它会自动计算保证金，而不是手动输入保证金。这样，即使您更改宽度和高度，它也将始终居中。当然，请确保使用前缀，这不一定适用于非现代浏览器。

.fixedCenter {
  width: 150px;
  height: 150px;
  position: fixed;
  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%); <!-- using a transform instead of margin -->

  background: red;
}

内容不会以页面为中心

1 个答案: