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/

相关文章:

javascript - 如果选中复选框,则更改类 bg

jquery - 选择多个表中的 <td> 标签,同时排除特定表

javascript - 如何使用 Javascript 而不是 jQuery 从 HTML 表单数据生成 JSON 列表?

javascript - jquery $ ('id' ).text 加粗

php - 避免最小和最大属性的范围错误并强制提交表单

javascript - 绑定(bind)和解除绑定(bind)搞砸了我

javascript - 幻灯片按钮下划线和淡出动画

html - 我想在 html 中连接两个文本字段并在其他测试字段中显示结果

html - 为什么会溢出: hidden remove scroll margin top?

html - 下拉菜单不稳定