Html 如何将我的徽标图像水平和垂直地居中到 CSS 中的另一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16884872/
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
How do I center my logo image to another div in CSS horizontally and vertically?
提问by user2445229
I need help positioning a logo horizontally center. It also needs to be centered vertically to the top of my links div. Can someone help me?
我需要帮助将徽标水平放置在中心位置。它也需要垂直居中到我的链接的顶部div。有人能帮我吗？
I'd like my logo to look like this:
我希望我的标志看起来像这样：
Below is my HTML and CSS:
下面是我的 HTML 和 CSS：
HTML -http://codebin.org/view/199faa14
HTML - http://codebin.org/view/199faa14
<div id="container">
<div id="logo">
<img src="images/images/logo.gif" />
</div>
<div id="navigation">
navigation
</div>
<div id="header">
</div>
<div id="line">
</div>
<div id="content">
content
</div>
</div>
CSS -http://codebin.org/view/dda88d94
CSS - http://codebin.org/view/dda88d94
body {
background: url(../images/images/bg_page.gif) center center;
}
#container {
width: 940px;
margin: 0 auto;
}
#header {
height: 281px;
background: url(../images/home/header.gif) top center;
position: relative;
}
#logo {
position: absolute;
z-index: 2;
top: 0px
height: 214px;
margin: 10px auto 0 auto;
}
#navigation {
position: relative;
height: 40px;
background: #fff;
margin-top: 100px
}
#content {
height: 541px;
background: url(../images/home/bg_body.png) top center;
position: relative;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}
回答by Anze
try something like this before using javascript!
在使用javascript之前尝试这样的事情！
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
or this!
或这个！
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
回答by ValleyDigital
I think I understand your question. Since you are calling out your logo img in the html, try this.
我想我明白你的问题。由于您在 html 中调用徽标 img，请尝试此操作。
<div id="logo">
<img src="images/images/logo.gif" alt="logo" align="center"/>
</div>
回答by G-Cyrillus
You could achieve this with:
您可以通过以下方式实现：
- display:inline-block;
- line-height;
- negative margin
- text-align:justify (you have 5 items 4 links & 1 img in middle)
- :after
- 显示：内联块；
- 行高；
- 负边际
- text-align:justify（中间有 5 个项目 4 个链接和 1 个 img）
- ：后
Demo made in a similar context for someone else :
http://dabblet.com/gist/5375725
在类似上下文中为其他人制作的演示：http:
//dabblet.com/gist/5375725
回答by directory
Some people will facing some problems while using the vertical-align: middle; styling attribute. CSS needs to be written in the prober way. For people looking for a quick fix.
有些人在使用 vertical-align: middle; 时会遇到一些问题。样式属性。CSS 需要以探测器的方式编写。对于寻求快速修复的人。
.logo { left:0; top:0; height:100%; width:100px; }
<div class="logo" style="background:url('/assets/images/site-logo.png') center center no-repeat;">
<img src="/site/logo.png" style="display:none;" />
</div>
*make sure the container has the position:relative; css attribute.
*确保容器具有位置：相对；css 属性。
It's easy handeling retina and compatible with all kind of CSS markups. hope this simple technique can save some time for people :)
它很容易处理视网膜并与所有类型的 CSS 标记兼容。希望这个简单的技术可以为人们节省一些时间:)
