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

我想修复圆形徽标的位置，我如何使它完全像我在下面分享的设计最终结果。如何使用css修复我网站中的徽标位置

最终结果：

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

来源

2016-02-17 coderman

绝对定位圈，因此坐在DOM的其余部分之上。您可以添加以下到您的.logo，它会工作（注意，您可以通过清空左/右CSS属性和设置保证金auto中心绝对定位的元素）：

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

我更新了codepen例如，现在的工作： http://codepen.io/staypuftman/pen/rxbvVm

来源

2016-02-17 19:27:37 staypuftman

工程很好..谢谢先生。 – coderman

很高兴帮助。 – staypuftman

您可以使用position，然后如你所愿走动，检查样品：codepen link

PS：像素只是为了告诉你如何，请更改为满足您的要求

来源

2016-02-17 19:26:14 Abude

谢谢我的朋友。 – coderman

@MohammadMehrabi很高兴我能帮忙，请接受答案，如果这为你工作。 – Abude

，或者您可以使用Flex和有点切缘阴性的：

/* 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; 
 
}

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

来源

2016-02-17 19:33:07

您的代码运行良好，但是当我看到完整页面预览时，它没有很好的结果。 – coderman

@MohammadMehrabi你跟着codepen链接？（不同的设置）。实际完整页面应该是什么样的最终结果？ –

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

回答

相关问题