Question

这是菜单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的工作还不多，所以很抱歉，如果这是一个问题的基础。

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

Answer 1

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

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

最后一个问题是，即使您成功地使ul元素居中，它也不会 look 居中，因为根据需要，该元素的一部分将不包含列表项因为背景是透明的，所以在屏幕的宽度上显示。您可以通过添加background: #A4A4A4为ul元素提供与li元素相匹配的纯色背景来解决此问题，也可以使用{{1} }放在li元素上。

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

text-align: center

Answer 2

IIRC，没有定义的宽度就不能使用自动。另外，它是margin:0 auto;，尽管这可能与html5缺乏严格性无关。

Answer 3

正确的方法是使用margin：0 auto;下面，我用两种方法将框居中。

HTML

count = len([i for i in x if i*i in x])

CSS

<!-- Margin box -->
<div class="container">
  <div class="box-centered">

  </div>
</div>

<br>

<!-- Flexbox box -->
<div class="Aligner">
  <div class="Aligner-item"></div>
</div>

这是jsfiddle中的示例：http://jsfiddle.net/1h0f74qb/

希望这可以为您提供帮助。

Answer 4

您可以使用 display：flex ：

代替 display：inline

ul{
   ...
   display: flex;
   align-content: center;
   ...
}

Answer 5

取决于您需要如何使项目居中。

display: flex和align-items:center

在HTML / CSS中使用弹性框的简单示例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
}</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS / HTML-当自动分页功能似乎无效时，如何居中？

5 个答案: