时间戳

首页 > 解决方案 > CSS/HTML - 当自动边距似乎不起作用时，我如何才能居中？

html - CSS/HTML - 当自动边距似乎不起作用时，我如何才能居中？

问题描述

这是我的菜单的 CSS 的一部分：

ul {
    text-align: left;
    display: inline;
    margin: auto;
    width: 50%;
    position: fixed;
    top: 0;
    list-style: none;
}

我试过了auto-margin left and right。我尝试过的所有方法都没有导致整个页面以自身为中心。

这是我对上述菜单下的主“框”所做的。

.box {
    margin: auto;
    width: 50%;
    padding: 20px;
    background-color: #FFFFFF;
    word-break: break-all;
}

整页来源在：https ://pastebin.com/56HbfaGM

同样困扰我的是不同的浏览器显示不同的结果。

多年来我没有对 HTML/CSS 做太多事情，如果这是一个超级基本的问题，我很抱歉。

我只是想知道一些更全面的居中方法。

标签： htmlcss

解决方案

如果您margin: 0 auto的元素是position: fixed. 而且您不能margin: 0 auto在inline元素上使用。

您遇到的另一个问题是ul元素的左侧有填充。您需要删除它以正确居中。

最后一个问题是，即使您成功地使ul元素居中，它也不会看起来居中，因为由于背景是透明的，因此根据屏幕的宽度，元素的一部分不会被列表项填充。您可以通过添加background: #A4A4A4为元素提供与ul元素匹配的纯色背景来解决此问题，或者您可以通过在元素上使用来使元素li居中。litext-align: centerul

以下是正确居中固定元素以及居中列表项的示例。

ul {
  text-align: center;
  display: inline;
  padding: 0;
  width: 50%;
  position: fixed;
  top: 0;
  left: 50%;
  margin: 0 0 0 -25%;
  list-style: none;
}

推荐阅读