中心标签无法正常工作

Question

我有我的框架设计，我想在#content div中进行实验。我想将文本居中，但它无法正常工作。

可以在我的页面上看到。

index.HTML中最重要的部分（在删除脚本和其他链接标记之后）可以在这里看到：

＆＃13;

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

你可以看到中心偏向右边。如何解决？

Answer 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将100% div更改为页面宽度的calc(100% - 250px) ，但要补偿250px侧边栏。

此外，border和padding默认为添加，表示总填充为20px，宽度为500px会产生{ {1}}真宽。我们可以通过实施520px来避免此行为，box-sizing: border-box应用填充和边框向内而不是向外。

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

Answer 2

为了解决您的中心问题，将text-align: center;添加到父级会将子元素置于其中“，HTML5不再支持<center>标记，因此您不应该使用它。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;