0

我想使用 HTML/CSS 在我的页面的垂直中间显示一个横幅，但到目前为止我还不能这样做。图像总是在我的窗口顶部。

这是我的 HTML 代码：

<head>
    <title>Bo-bee</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
        <img class="banner" src="./res/pictures/logo-bee.png" alt="bobee banner"/>
</body>

这是我的 CSS 代码：

html, body{
    height:100%;
}

.banner{
    width:100%;
}
img{
    vertical-align: middle;

}

难道我做错了什么？注意：我使用的是 Firefox 22.0。亲切的问候。

4

5 回答 5

1

vertical-align用于inline或table-cell元素，https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。

所以让我们使用和的 CSSdisplay属性值。 需要应用于父元素才能工作。http://caniuse.com/css-tabletabletable-celldisplay: table;display: table-cell

http://jsfiddle.net/uhqMw/1/

CSS

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body {
     display: table;
     background-color: blue;
}
.banner {
     display: table-cell;
     vertical-align: middle;
}
img {
     width: 100%;
}

HTML

<div class="banner">
    <img src="http://lorempixel.com/300/100/" />
</div>
于 2013-07-30T21:14:53.843 回答
0

将 img 放在一个 div 中，然后给 div 一个类横幅

将横幅宽度设置为 100%，将图像宽度设置为 100%，以便填充横幅的 div 容器

html:

<title>Bo-bee</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="banner"
<img src="../res/pictures/logo-bee.png" alt="bobee banner"/>
</div>
</body>

CSS：

   .banner{
     width:100%;
     margin:0 auto;
    }

   .banner img{
    width:100%;
    }
于 2013-07-30T22:11:41.053 回答
0

你能提供休闲代码吗，这可能很有用

    div {position:relative;}
    img {position:absolute;top:0;bottom:0;margin:auto;}
    .image {min-height:50px}

如果它不起作用，请检查 此链接

谢谢你，

于 2013-07-30T21:13:52.090 回答
0

来自：http ://www.w3.org/Style/Examples/007/center.en.html

CSS level 2 没有垂直居中的属性。CSS level 3 中可能会有一个。但即使在 CSS2 中，您也可以通过组合一些属性来垂直居中块。诀窍是指定将外部块格式化为表格单元格，因为表格单元格的内容可以垂直居中。

下面的示例在具有特定给定高度的块内将段落居中。一个单独的示例显示了在浏览器窗口中垂直居中的段落，因为它位于绝对定位且与窗口一样高的块内。

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

此处带有图像的示例

于 2013-07-30T21:10:44.060 回答
0

只是：

background-position: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

于 2015-11-17T02:03:54.350 回答