水平居中 a <section>

Question

我正在尝试制作一个响应式网站，其中 head、nav& footer 正常对齐（左），section "the thing with the Green and Blue color" 在中间。代码：

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer
{
 display: block;
}

body
{
 font-family: 'Open Sans', sans-serif;
 background: #f0f0f0;
 font-weight: 300;
}

header
{
 background-color:yellow;
}

nav
{
 background-color:orange;
}

section
{
 background-color:yellowgreen;
 width: 80%;
 display: inline-block;
}

footer
{
 background-color:deepskyblue;
}

article
{
 background-color:red;
}

aside
{
 background-color:blue;
 width: 20%;
    float: right;
}

#mid
{
    margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
 <title>The Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <script>
  document.createElement("header");
  document.createElement("nav");
  document.createElement("aside");
  document.createElement("section");
  document.createElement("footer");
 </script>
</head>
<body>
 <header>
  I´m the Header
 </header>
 <nav>
  Navigation
 </nav>
 <section id="mid">
  <aside>
   The Sidebar
  </aside>
  <p>Text!</p>
  <p>2nd Text</p>
 </section>
 <footer>
  &copy; Unknown | Desing: ME
 </footer>
 
</body>
</html>

现在。我想把放在中间。
我用额外的 div 尝试了它，而不是 section id=mid 和 class 等。但是 section 中的文本应该是 left，这就是为什么我不使用 <center>
我试图在 Whosebug 的索引中搜索，但没有任何效果。唯一移动的是宽度多次变为 50%。

有人能找出代码中的错误吗？

Answer 1

inline-block 元素通过将 text-align:center 应用到父级来居中...在本例中，body。

   body
    {
        font-family: 'Open Sans', sans-serif;
        background: #f0f0f0;
        font-weight: 300;
        text-align:center;
    }

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");
 header,
nav,
aside,
section,
footer {
  display: block;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: #f0f0f0;
  font-weight: 300;
  text-align: center;
}
header {
  background-color: yellow;
}
nav {
  background-color: orange;
}
section {
  background-color: yellowgreen;
  width: 80%;
  display: inline-block;
}
footer {
  background-color: deepskyblue;
}
article {
  background-color: red;
}
aside {
  background-color: blue;
  width: 20%;
  float: right;
}
#mid {
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <title>The Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script>
    document.createElement("header");
    document.createElement("nav");
    document.createElement("aside");
    document.createElement("section");
    document.createElement("footer");
  </script>
</head>

<body>
  <header>
    I´m the Header
  </header>
  <nav>
    Navigation
  </nav>
  <section id="mid">
    <aside>
      The Sidebar
    </aside>
    <p>Text!</p>
    <p>2nd Text</p>
  </section>
  <footer>
    &copy; Unknown | Desing: ME
  </footer>

</body>

</html>

作为替代方案，将 section 保留为块并应用 margin:auto

section
{
    background-color:yellowgreen;
    width: 80%;
    /* display: inlineblock; */ /* remove this */
    margin:auto;
}

Answer 2

使用

section
{
    background-color:yellowgreen;
    width: 80%;
    margin-right:auto;
    margin-left:auto;
}

不要只放 margin:auto 否则边距也会应用到顶部和底部。

Answer 3

希望您清楚： https://jsfiddle.net/u636avbf/

CSS:

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer, div
{
    display: block;
    position: relative;
    float: left;
}

body
{
    font-family: 'Open Sans', sans-serif;
    background: #f0f0f0;
    font-weight: 300;
}

header
{
    background-color:yellow;
    width: 100%;
}

nav
{
    background-color:orange;
    width: 100%;
}

section
{
    background-color:yellowgreen;
    width: 80%; 
    min-height: 20em;

}

footer
{
    background-color:deepskyblue;
    width: 90%;
    padding: 0.5em 5%;
}

article
{
    background-color:red;
}

aside
{
    background-color:blue;
    width: 20%;
    min-height: 20em;
}

#mid
{
    width: 80%;
}

#pagewrapper{
     width: 100%;
}

我也编辑了一点 html:

<div id='pagewrapper'>
    <header>
        I´m the Header
    </header>
    <nav>
        Navigation
    </nav>
    <section id="mid">      
        <p>Text!</p>
        <p>2nd Text</p>
    </section>
        <aside>
            The Sidebar
        </aside>

    <footer>
        &copy; Unknown | Desing: ME
    </footer>
</div>

不要为我的包装而生气 div :) 如果需要，请按需制作。

希望这有用..

水平居中 a <section>

Horizontally Center a <section>

html

css

alignment