Question

我不希望右上方的按钮功能正常，它只是一张照片。我需要帮助的是尝试将内容看起来像带有框内的灰色背景。

我制作了背景，但我需要在其中制作框，并学习如何在框内键入<p>。

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
header {
    width: 100%;
    height: 90px;
    background-color: #212022;
    border-bottom:1px solid orange;
}
main {
  background-color: #181719;
}
footer {
  width: 100%;
  height: 167px;
  background-color : #212022;
  border-top:1px solid orange;
}
p{
  color: white
}
#logo{
	width: 520px;
	height: 80px;
	background: url('//i.imgur.com/PHXLLsn.png') no-repeat scroll center;
	margin-top:5px;
  left: 120px;
  float: left;
	position: absolute;
}
#steamlogin{
	width:154px;
	height: 23px;
	background: url('//i.imgur.com/qKairpt.png');
	margin-top: 32px;
	float: right;
	position: absolute;right: 130px
}

<body class="Site">
  <header>
    
    <div class="wrapper">
    	<div id="logo"></div>
    	<div id="steamlogin"></div>

  </header>
  <main class="Site-content">this is content</main>
  <footer>this is footer</footer>
</body>

Answer 1

您可以对具有固定宽度的元素（例如margin-right:auto，margin-left:auto）使用width:980px和width:80%来居中该元素。（我使用了margin属性的简写版本，如margin: 50px auto;）

如果您希望中心元素包含h1，h2，p等文字，则可以对这些元素使用text-align:center。

在下面的示例中，我创建了一个div元素，其中一个名为＆＃34的类;居中＆＃34;你也可以看到我如何将h2元素集中在一起。我希望这会对你有所帮助。

http://jsfiddle.net/t5m4ew3r/4/

另外我建议你查看一些html / css教程。你可以在互联网上轻松找到它们。通过这种方式，你可以更好地学习。

内容中间的CSS框？

1 个答案: