我正在尝试重新制作Google主页布局以供练习,而我似乎无法将Google徽标作为中心。
我试过了:
text-align: center;
position: absolute;
我意识到它可能是影响徽标对齐的顶栏,因为当我移除顶栏时,徽标变为居中。但是,将Google徽标放在单独的div中并设置position:absolute;
也不起作用。
这是指向我的项目http://codepen.io/wilfredbtan/pen/dXLxOz
的链接这是topbar和logo html的片段:
<div id="container">
<div id="topbar">
<ul>
<li>
<a href="#">
<img src="the_odin_project/google-homepage/images/blueperson.jpg" style="border-radius: 100%" />
</a>
</li>
<li>
<a href="https://plus.google.com/u/0/notifications/all?hl=en">
<img src="the_odin_project/google-homepage/images/notification.png" />
</a>
</li>
<li>
<a href="https://www.google.com/intl/en/aboout/products/">
<img src="the_odin_project/google-homepage/images/apps.png" />
</a>
</li>
<li><a href="https://images.google.com/">Images</a></li>
<li><a href="https://mail.google.com/">Gmail</a></li>
</ul>
</div>
<img style="" id="logo" alt="google" src="the_odin_project/google-homepage/images/google-logo.png" />
</div>
以下是相关CSS的片段:
body {
margin: 0 auto;
padding: 0;
}
#container {
margin: 10px 0 0 0;
text-align: center;
}
#topbar {
margin: 25px 40px 0 0;
}
ul {
list-style-type: none;
}
li {
float: right;
display: block;
padding: 0 0 0 18px;
}
#topbar ul li {
font: 12.5px Arial, sans-serif;
}
#topbar ul li:first-child {
margin-top: -10px;
}
#logo {
margin: 50px 0 10px 0;
width: 35em;
position: relative;
}
答案 0 :(得分:0)
我在此处所做的是,将您的徽标img
移至新div
,此新div
的宽度为50%。为了使它居中,我在CSS中使用了margin:0 auto
。
更新的HTML如下
<div id="logo-container">
<img style="" id="logo" alt="google" src="http://res.cloudinary.com/wilfredxd/image/upload/v1471790654/google-logo_paxdp8.png" />
</div>
,更新的CSS如下
#logo-container {
width: 50%;
margin: 0 auto;
}
#logo {
/* margin: 50px 0 10px 0; */
width: 100%;
}
答案 1 :(得分:0)
这很简单。只需像这样更改#logo
CSS:
#logo {
margin: 50px auto 20px;
width: 20em;
display: block;
clear: both;
}
要使图像居中,请使用margin: auto;
并将其设置为块元素。
答案 2 :(得分:0)
#logo{
clear: both;
display: block;
margin: 0 auto;
}