html - 如何使用 css 修复我网站中的 Logo 位置

Question

我想修复圆形标志的位置，我如何才能使它与我在下面分享的设计最终结果完全一样。

最终结果:

html:

<nav></nav>
<header>
  <div class="logo">

  </div>
</header>
<div class="main">
  <div class="title">
    <h1>Mohammad Mehrabi - محمد محرابی</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, eius.</h3>
  </div>
</div>

CSS:

nav{
  height: 40px;
  background: #a1504b;
  border-bottom: 2px solid #8c4742;
}
header{
  background: #443a33 url("http://www.transparenttextures.com/patterns/az-subtle.png") repeat;
  height: 150px;
  border-bottom: 2px solid #38302a;
}
.logo{
  height: 150px;
  width: 150px;
  margin: 0 auto;
  background-color: #202727;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border:1px #28221e solid;
  box-shadow:  0 0 3px #222;
}

.main{
  height: 1000px;
  background: #222 url("http://www.transparenttextures.com/patterns/az-subtle.png") repeat;
}

.title{
  padding: 1em 0;
  text-align: center;
}
.title h1{
  font-family: Arial;
  font-weight: normal;
  font-size: 24px;
  color: #ddd;
  text-shadow: 1px 1px 0 #000;
}
.title h3{
  font-family: Arial;
  font-weight: normal;
  font-size: 14px;
  color: #fbc36a;
  text-shadow: 1px 1px 0 #000;
}

我的代码的实时预览:http://codepen.io/mehrabi/pen/MKRVJg

Answer 1

绝对定位圆圈，使其位于 DOM 的其余部分之上。您可以将以下内容添加到您的 .logo 并且它会起作用(请注意，您可以通过将左/右 CSS 属性归零并将边距设置为 auto):

.logo {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  margin: auto;
}

我更新了您的 codepen 示例，现在可以使用了: http://codepen.io/staypuftman/pen/rxbvVm