中心标签无法正常工作答案

【问题标题】：Center tag not working properly中心标签无法正常工作
【发布时间】：2017-06-13 00:11:37
【问题描述】：

我已经完成了框架设计，现在我想在#content div 中进行实验。我想使文本居中，但无法正常工作。

可以在我的页面上看到。

index.HTML 最重要的部分（除去 script 和其他链接标签后）可以在这里看到：

body {
  font-family: "PT Sans";
  background-color: #dfc;
  color: #000;
}

.top {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #5dbf61;
  z-index: 100;
}

.stickyTop {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.logo {
  display: block;
  font-size: 26px;
  padding: 5px;
  padding-left: 10px;
  text-align: center;
  letter-spacing: 1px;
}

.logo a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.sidebar {
  width: 250px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 50px;
  background-color: #4caf50;
  z-index: 99;
  overflow-y: auto;
  overflow-x: none;
}

.stickySidebar {
  height: 100%;
  position: fixed;
  left: 0;
  top: 50px;
  z-index: 99;
}

.sidebar>.option {
  height: 42px;
  line-height: 40px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.sidebar a {
  display: block;
  text-decoration: none;
  color: #dfc;
}

.sidebar>.option:hover {
  background-color: #8bc34a;
}

.sidebar>.selected {
  height: 42px;
  line-height: 40px;
  width: 100%;
  left: 0;
  display: inline-block;
  background-color: #8bc34a;
  text-indent: 12px;
  color: #dfc;
}

.sidebar>.panel {
  width: 226px;
  /*250 - 12 - 12*/
  left: 0;
  display: inline-block;
  padding: 12px;
  color: #dfc;
  font-size: 14px;
}

.sidebar>.empty {
  height: 42px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.sidebar>.empty-border {
  height: 42px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.navbar {
  width: 100%;
  height: 26px;
  left: 250px;
  top: 50px;
  position: fixed;
  display: block;
  z-index: 99;
  padding-left: 9px;
  padding-top: 4px;
  border-bottom: 2px solid #9b8;
  background-color: #bda;
  color: #796;
  font-size: 14px;
}

.stickyNavbar {
  height: 100%;
  position: fixed;
  left: 250px;
  top: 50px;
  z-index: 99;
}

.navbar a {
  color: #796;
}

.content {
  width: 100%;
  height: 100%;
  left: 250px;
  top: 76px;
  position: fixed;
  display: block;
  padding: 15px;
}

.spaced-text {
  letter-spacing: 1px;
}

.fixed-center {
  width: 100%;
  display: block;
  text-align: center;
}

<div id="container">
  <div class="top">
    <div class="logo">
      <a href="#"><b>Nieposortowane</b></a>
    </div>
  </div>
  <div class="sidebar">
    <div class="option"><a href="#">Strona Główna</a></div>
    <div class="option"><a href="#">Przyklad 1</a></div>
    <div class="selected"><a href="#">Może coś tu będzie</a></div>
    <div class="option"><a href="#">Strona Niegłówna</a></div>
    <div class="empty-border"></div>
    <div class="panel" id="info">
      <b class="spaced-text">Informacje o stronie</b><br/><br/> Ta strona jeszcze nie jest stroną, bo trwa robienie designu. Lorem ipsum dolor sit amet jakoś tak cośtam dalej nie pamiętam a nie chce mi się kopiować.
    </div>
    <div class="panel" id="style-switcher">
      <b class="spaced-text">Wybieranie stylu strony</b><br /><br />
      <b>Styl strony:</b><br />
      <input type="radio" id="style_1" name="design" onclick="update();" checked>Normalny</input><br />
      <input type="radio" id="style_2" name="design" onclick="update();">Dark</input><br />
    </div>
    <div class="panel" id="footer">
      <b>Nieposortowane.pl &copy; 2017<br />
    				Karol Turbiarz</b><br /><br /> Wszelkie prawa zastrzeżone<br /> All rights reserved
    </div>
    <br /><br />
  </div>
  <div class="navbar">
    <a href="#">Nieposortowane.pl</a> > <a href="#">Strona główna</a>
  </div>
  <div class="content">
    <center>a</center>
  </div>
</div>

你可以看到中心是如何偏向右侧的。怎么解决？

【问题讨论】：

文本在 div 中正确居中 - 问题是它居中的 content div 比页面本身宽得多。此外，完全删除<center>，只需将text-align: center; 放在content div 上。
<center/> 是一个已弃用的 html 元素：developer.mozilla.org/en-US/docs/Web/HTML/Element/center。使用 css 使文本居中。
@LuudJacobs 当我使用 css 时，同样的事情会发生
同样，您的content div 比页面大得多。您可能需要使用vw 和calc() 的一些变体来获得正确的值。在content div 上尝试width: calc(100vw - 250px)。
你的标记是一团糟。为什么一切都是position:fixed？您的内容具有 100% 的宽度（父容器的），但向右移动了 250 像素。那里有大量关于如何建立现代网站的文章，即使w3schools 现在也有相当高质量的材料。

标签： html css web

【解决方案1】：

问题：

1. <center> 是 obsolete，所以我们将使用 CSS 代替（父元素上的 text-align: center; 与 <center> 的工作方式相同)

2. 您的文本在content div 中正确居中，问题是content div 太宽了。您已将其设置为 width: 100%，但因为它是 position: fixed;，所以 100% 意味着 100% 的页面。 250px 太多了，因为它没有补偿侧边栏。

个人建议：

说实话，这个页面是一团糟。您几乎没有元素“in-the-flow”，因为没有任何东西是相对定位的。解决您指出的问题有点像在流沙上盖房子，然后问如何修复厨房的滴水管。

您可以使用的position: absolute; 和position: fixed; 元素越少，您在一般页面结构方面就会越好。在某些情况下，绝对定位可能正是您所需要的，但大多数时候您希望页面流动。这些项目应该正确地相互嵌套，并且它们应该自行定位和对齐，而不依赖于硬编码的位置属性。

接下来，一些常见的现代技术包括flexbox 和grid，尽管我个人一直主张预先学习基础知识。

Support table and Resources for Grid layout
Support table and Resources for Flexbox

尽管如此，如果您真的处于紧要关头，这里有一个快速的解决方案：

将您的content div 更改为页面宽度的100%，但补偿250px 侧边栏，使用calc(100% - 250px)。

此外，border 和padding 默认情况下是加法，这意味着总填充的20px 和500px 的宽度导致520px 真实宽度。我们可以通过实现box-sizing: border-box 来避免这种行为，它应用填充和边框向内而不是向外。

.content {
    width: calc(100% - 250px);
    box-sizing: border-box;
    text-align: center;
}

【讨论】：

我坐在角落里为代码哭泣，但您的解决方案是正确的。请在您的回答中提及网格布局，以使我不那么难过。无论如何 +1。
@Christoph 我考虑过，但我想知道relative 与absolute 和“CSS 流”可能应该在你开始使用像 flexbox 或网格这样的技术之前铭刻在你的脑海中。话虽如此，我已经编辑了我的答案以记录它们！

【解决方案2】：

只是为了解决你的中心问题，将text-align: center;添加到父元素将使子元素居中），HTML5不再支持<center>标签，所以你不应该使用它。

也使用width: calc(100% - 250px); 作为内容，因为您的左侧菜单的宽度为 250 像素；

body {
  font-family: "PT Sans";
  background-color: #dfc;
  color: #000;
}

.top {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #5dbf61;
  z-index: 100;
}

.stickyTop {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.logo {
  display: block;
  font-size: 26px;
  padding: 5px;
  padding-left: 10px;
  text-align: center;
  letter-spacing: 1px;
}

.logo a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.sidebar {
  width: 250px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 50px;
  background-color: #4caf50;
  z-index: 99;
  overflow-y: auto;
  overflow-x: none;
}

.stickySidebar {
  height: 100%;
  position: fixed;
  left: 0;
  top: 50px;
  z-index: 99;
}

.sidebar>.option {
  height: 42px;
  line-height: 40px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.sidebar a {
  display: block;
  text-decoration: none;
  color: #dfc;
}

.sidebar>.option:hover {
  background-color: #8bc34a;
}

.sidebar>.selected {
  height: 42px;
  line-height: 40px;
  width: 100%;
  left: 0;
  display: inline-block;
  background-color: #8bc34a;
  text-indent: 12px;
  color: #dfc;
}

.sidebar>.panel {
  width: 226px;
  /*250 - 12 - 12*/
  left: 0;
  display: inline-block;
  padding: 12px;
  color: #dfc;
  font-size: 14px;
}

.sidebar>.empty {
  height: 42px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.sidebar>.empty-border {
  height: 42px;
  width: 100%;
  left: 0;
  display: inline-block;
  text-indent: 12px;
  color: #dfc;
}

.navbar {
  width: 100%;
  height: 26px;
  left: 250px;
  top: 50px;
  position: fixed;
  display: block;
  z-index: 99;
  padding-left: 9px;
  padding-top: 4px;
  border-bottom: 2px solid #9b8;
  background-color: #bda;
  color: #796;
  font-size: 14px;
}

.stickyNavbar {
  height: 100%;
  position: fixed;
  left: 250px;
  top: 50px;
  z-index: 99;
}

.navbar a {
  color: #796;
}

.content {
  width: calc(100% - 250px);
  height: 100%;
  left: 250px;
  top: 76px;
  position: fixed;
  display: block;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
}

.spaced-text {
  letter-spacing: 1px;
}

.fixed-center {
  width: 100%;
  display: block;
  text-align: center;
}

<div id="container">
  <div class="top">
    <div class="logo">
      <a href="#"><b>Nieposortowane</b></a>
    </div>
  </div>
  <div class="sidebar">
    <div class="option"><a href="#">Strona Główna</a></div>
    <div class="option"><a href="#">Przyklad 1</a></div>
    <div class="selected"><a href="#">Może coś tu będzie</a></div>
    <div class="option"><a href="#">Strona Niegłówna</a></div>
    <div class="empty-border"></div>
    <div class="panel" id="info">
      <b class="spaced-text">Informacje o stronie</b><br/><br/> Ta strona jeszcze nie jest stroną, bo trwa robienie designu. Lorem ipsum dolor sit amet jakoś tak cośtam dalej nie pamiętam a nie chce mi się kopiować.
    </div>
    <div class="panel" id="style-switcher">
      <b class="spaced-text">Wybieranie stylu strony</b><br /><br />
      <b>Styl strony:</b><br />
      <input type="radio" id="style_1" name="design" onclick="update();" checked>Normalny</input><br />
      <input type="radio" id="style_2" name="design" onclick="update();">Dark</input><br />
    </div>
    <div class="panel" id="footer">
      <b>Nieposortowane.pl &copy; 2017<br />
    				Karol Turbiarz</b><br /><br /> Wszelkie prawa zastrzeżone<br /> All rights reserved
    </div>
    <br /><br />
  </div>
  <div class="navbar">
    <a href="#">Nieposortowane.pl</a> > <a href="#">Strona główna</a>
  </div>
  <div class="content">
    <span>abc</span>
  </div>
</div>

【讨论】：