Question

我正在努力建立一个响应式网站head，nav＆amp; footer正常对齐（左），section“绿色和蓝色的东西”位于中心。守则：

@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>的原因我试图在stackoverflow的索引中搜索但没有任何效果。唯一正在移动的是宽度多次到50％。

任何人都可以在代码中找到错误吗？

Answer 1

inline-block elements are centered by applying text-align:center to the parent...in this case, the 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>

As an alternative, leave the section as block and apply margin:auto

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

Answer 2

use

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

don't just put margin:auto or then the margin will apply to top and bottom too.

Answer 3

I hope this will be clear to you: https://jsfiddle.net/u636avbf/

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

AND I also edited a bit 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>

don't be mad for my wrapping div :) Make it as you need instead if needed.

Hope this is useful..

水平居中<section>

3 个答案: