html - 内容不会在页面上居中

标签 html css

试图找出为什么以下 margin !important 行没有将内容居中放置在这个 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>

最佳答案

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

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

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

  background: red;
}

关于html - 内容不会在页面上居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22119092/

相关文章:

jquery - 通过单击另一个元素触发对一个元素的单击

html - Text-Align "Left"仅针对第一列的 "values"

css - 在向下滚动之前加载页面时标题 CSS 中的背景照片

css - 为什么 CSS 从一开始(直到现在)都不包含变量?

ios - 创建用于从本地下载 iOS 应用程序的 SSL 本地网络

javascript - javascript 中的 3d 数组

javascript - 如果是则返回确认调用函数

html - 列表边框上方的图像..可能很容易

javascript - jQuery Tablesorter 静态行

css - 并排对齐控件