Html 在页眉中心对齐徽标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18692371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Logo at center of Header
提问by Varun Mehta
I'm trying to center align my Logoof my screen but not able to accomplish. Please help.
我正在尝试将我Logo的屏幕居中对齐，但无法完成。请帮忙。
HTML
HTML
<!-- Header Start -->
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft"><a href="#dashboard" data-transition="slide" data-direction="reverse"><img alt="" title="" src="images/top_lft_arrow.png" /></a></div>
<div class="HeaderRgt"><div class="TopRedBox"><a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>Save</a></div></div>
<div class="HeaderLogo">LOGO</div>
</div>
<!-- Header Ends -->
CSS
CSS
.HeaderLogo
{
position: absolute;
margin:0 auto;
width: 100px;
top:10px;
}
回答by MitulP91
One method to do this is to put all your divtags into another divwith the class wrapper.
You can then add the CSS text-align: center;on your wrapper class and that will center align your header.
一种方法是使用类包装器将所有div标签放入另一个标签中div。然后，您可以text-align: center;在包装类上添加 CSS ，这将使您的标题居中对齐。
This is shown in this Fiddle. Hope it helps.
这显示在这个Fiddle 中。希望能帮助到你。
回答by Daniel W.
2 Possibilities:
2 可能性：
.HeaderLogo {
width: 100%;
text-align: center;
}
Or
或者
html
html
<div class="HeaderLogoWrapper"><div class="HeaderLogo">LOGO</div></div>
css
css
.HeaderLogoWraper {
margin: 0 auto;
text-align: center;
width: 100%;
}
回答by Falguni Panchal
回答by Iren Patel
回答by Danubian Sailor
If you want to center the image, you can do that with CSS property background-position:
如果要使图像居中，可以使用 CSS 属性 background-position 来实现：
.MastHead {
background-image: url('mylogo.png);
background-position: top;
}
Reference on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position?redirectlocale=en-US&redirectslug=CSS%2Fbackground-position
MDN 上的参考：https: //developer.mozilla.org/en-US/docs/Web/CSS/background-position?redirectlocale =en-US &redirectslug =CSS%2Fbackground-position
It will not work in IE6 (not sure with IE7) if someone is still using them...
如果有人仍在使用它们，它将在 IE6 中不起作用（不确定与 IE7）...
回答by ?ēēpak
I hope this will work for you
我希望这对你有用
Can you use margin-left:property instead of margin.
您可以使用margin-left:属性而不是margin。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<head>
<style type="text/css">
.HeaderLogo
{
position: absolute;
width: 100px;
top:10px;
margin-left:45%;
}
</style>
</head>
<body>
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft">
<a href="#dashboard" data-transition="slide" data-direction="reverse">
<img alt="logo" title="" src="images/top_lft_arrow.png" />
</a>
</div>
<div class="HeaderRgt">
<div class="TopRedBox">
<a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>
Save
</a>
</div>
</div>
<div class="HeaderLogo">LOGO
</div>
</body>
</html>
I hope this will work, and if it isn't working, then you can set position:relative
我希望这会起作用，如果不起作用，那么您可以设置 position:relative
回答by Carl V.
Follow instruction here. https://www.w3schools.com/css/css_align.asp
按照此处的说明进行操作。https://www.w3schools.com/css/css_align.asp
.className {
margin: auto;
}
.className {
margin: auto;
}
This should work!
这应该有效！
