0

我有一个元素，它是 div id 中的图像。我打算使这个页面成为一个正在建设的页面。我使用“margin：auto”css 命令制作了 div。我可以让 div 自动居中到该站点访问的任何浏览器的垂直方向是什么？

新手不知道如何做整个 JSFiddle 事情哈哈

这里也有一个网址：http ://nerissagrigsby.com/?page_id=5

我的 CSS：

#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}

我的 HTML：

<body>
<div id="openpagesig">
    <img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
    />
</div>
<!-- Open Page Signature -->
</body>
4

4 回答 4

3

您是否尝试过以下 CSS：

.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
    position: absolute; /* or "fixed" */

    /* The element you want to place in the middle of the page
       center should have explicitly defined dimensions: */
    width: 100px;
    height: 100px;

    top: 50%;
    margin-top: -50px; /* offset back at exactly half height of the element */
    left: 50%;
    margin-left: -50px; /* offset back at exactly half width of the element */
}

这是一个工作示例。

我需要提一下吗，即使在 Internet Explorer 5.5 中也可以使用！...但我怀疑这个浏览器是否仍然与任何人相关。

请参考下图了解负边距如何帮助：

负边距如何抵消元素

于 2013-01-31T15:28:11.873 回答
0

尝试类似：

.centeredDiv {
    width:17em;
    height:9em;
    position:absolute;
    left:50%;
    top:50%;
    margin:-135px 0 0 -155px;
    padding:1em;
    background-color:#fffff7;
    opacity:0.67;
    filter:alpha(opacity=67); /* for IE8 and earlier */
    border:2px solid #191919;
}

显然编辑测量和颜色以适应。

于 2013-01-31T15:27:56.027 回答
0

您遇到的问题与div页面上的垂直对齐元素有关。这是 HTML 和 CSS 编码中的常见问题。

一种解决方案是在外部div标签中包含一个容器元素。外部div应设置为100 %display: table;和100% 。使用属性设置内部。position: fixed;widthheightdivdisplay: table-cell;vertical-align: middle;

此外，外部div应该具有text-align: center;以使其子元素居中。

这是您需要的代码：

.outer { 
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
  position: fixed;
}
.container {
  display: table-cell;
  vertical-align: middle;
}

来自 jsbin 的示例：http: //jsbin.com/otolot/1/

尝试调整窗口大小以查看是否有效。

于 2013-01-31T16:13:35.717 回答
0

我个人使用这样的东西：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body>

    <div class="container">
        <div class="container-content">
            <div class="content">
              <img src="//placehold.it/803x283" />
            </div>
        </div>
    </div>
  </body>
</html>


<style>

  html, body {
    height: 100%;
  }

  .container {
    display: table;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .container-content {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
  }

  .container-content > .content {
    max-width: 803px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

</style>

这个解决方案效果很好，因为它不仅将内容垂直居中，而且如果浏览器窗口高度太小而无法全部显示，您仍然可以滚动查看所有内容，这是使用其他内容的主要缺点之一方法。

例子：

http://jsbin.com/owayec/2/

于 2013-01-31T16:00:30.293 回答