如何使用CSS修复我的网站中的徽标位置

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

您可以使用position，然后随意移动，查看示例：codepen link

PS：像素只是为了告诉你如何，请更改它们以符合您的要求

Answer 2

绝对定位圆圈，使其位于DOM的其余部分之上。您可以将以下内容添加到.logo，它会起作用（请注意，您可以通过将左/右CSS属性清零并将边距设置为auto来居中放置绝对定位的元素）：

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

我更新了您的codepen示例，它现在有效： http://codepen.io/staypuftman/pen/rxbvVm

Answer 3

或者您可以使用flex和一些负边距：http://codepen.io/gcyrillus/pen/yerjMM

＆＃13;

＆＃13;

/* CSS added */


html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  flex: 1;/* add this to main if you want 50/50 height shared with header */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.logo {
  position:relative;  
  margin: 0px auto -75px;
  }
.title {
  margin-top:50px;
  }
/* end css added */

nav {
  height: 40px;
  background: #a1504b;
  border-bottom: 2px solid #8c4742;
}

header {
  background: #443a33 url("http://www.transparenttextures.com/patterns/az-subtle.png") repeat;
  height: 130px;
  border-bottom: 2px solid #38302a;
  padding: 2px;
}

.logo {
  height: 150px;
  width: 150px;
  background: linear-gradient(to top, white, #319DCC, #202727);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border: 1px #28221e solid;
  box-shadow: 0 0 3px #222;
}

.main {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;