改进 - 现在使用图像重新调整大小

Question

这是一个我无法找到答案的基本问题。

我希望拍摄徽标图像，将图像精确地放在屏幕中间，同时保持图像的原始大小。在该图像下方（ - 5px向下），放一个小文本行，我选择它的字体。

当我尝试这样做时，一切都搞砸了，所以我会把基本的，如果你能帮我实现这个简单的目标，那就太棒了。

<html>
    <body>
        <img src="images/logoBlackBig.png" alt="W3Schools.com" >
    </body>
</html>

Answer 1

你可以通过使用css transform和absolute这样的位置来实现这一目标：

JSFiddle - DEMO

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
* {margin: 0; padding: 0;}
.div {
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid #000;
    text-align: center;
}
.img {
    vertical-align:middle;
}
.p {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #000;
    font-size: 24px;
}
</style>
</head>
<body>
    <div class="div">
        <img class="img" src="http://media.tumblr.com/tumblr_m6cfbeVrUy1qegis6o1_400.gif" alt="W3Schools.com">
        <p class="p">MY TEXT</p>
    </div>
</body>
</html>

＆＃13;

Answer 2

改进 - 现在使用图像重新调整大小

构建块

图片和文字包含在div中。
由于position: absolute，顶部，右侧，底部，左侧和margin: auto的正确组合，div居中。
容器将使用height: 100%和width: 100%
max-height: 100%和max-width: 100%可确保在重新调整尺寸时图像宽度高度比保持为1：1。

IE 8需要容器的固定像素高度。

更改最大宽度和高度以匹配图像。

演示

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.centered {
  position: absolute;
  top: -4em;
  /* change top unit size to get desired vertical placement */
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%; /*IE 8 Needs px height */
  width: 100%;
  max-height: 300px;
  max-width: 300px;
  min-width: 100px;
  text-align: center;
}
.centered img {
  max-height: 100%;
  max-width: 100%;
  min-width: 100px;
}

＆＃13;

<div class="centered">
  <img src="http://www.placehold.it/300" />
  <h1>Green Eggs and Ham</h1>
</div>

＆＃13;

使用CSS居中图像（水平和垂直）

2 个答案:

改进 - 现在使用图像重新调整大小

构建块

演示