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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:00:28  来源:igfitidea点击:

How do I center my logo image to another div in CSS horizontally and vertically?

htmlcssnavigationgraphical-logo

提问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: enter image description here

我希望我的标志看起来像这样: 在此处输入图片说明

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 标记兼容。希望这个简单的技术可以为人们节省一些时间:)