Question

它曾经工作过，但不知何故它已经不存在了，我无法弄明白为什么。我想在div框架内垂直和水平居中图像。现在它水平居中，但不是垂直居中，而是在div的顶部。我试过一个以前工作的内联盒。我不确定它为什么停止工作。

Answer 1

在div中使用flexbox作为中心图像。

使用css属性在底部获取页脚位置：绝对底部：0

Answer 2

使用vertical-align: middle垂直居中图像。在页脚中移除float:left和position: relative以将其移至底部

＆＃13;

.pageimg {
  position: relative;
  float: left;
  background: skyblue;
  width: 100%;
  min-height: 500px;
  text-align: center;
}

.pageimg img {
  margin: 0 auto;
  vertical-align: middle;
  display: inline-block;
}

.pageinline {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.pagetext {
  position: relative;
  float: left;
  background: skyblue;
  margin-top: 1%;
  width: 100%;
  text-align: center;
}

.pageframe {
  width: 75%;
  margin-left: 10px;
  text-align: center;
}
img {
  vertical-align: middle;
  text-align: center;
  width: 100%;
}
footer {
  left: 0;
  right: 0;
  height: 30px;
  bottom: 5px;
  font-size: 12;
  color: grey;
  background-color: lightgrey;
}

footer span {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
 }

＆＃13;

<html>
<head>
</head>
<body>
<div id="navbar">
  <img class="logo" src="marakele-elephant1.jpg" />
  komix.lit
  <button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
  <button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
  <div id=login class="navbutt dropdown">
    <p id='login-text'>dicctator</p>
    <div class='dropdown-content'>
      <span id='login-text'>
        <a href='login.php' id='dropdown-url'>Ausloggen</a>
        <a href='neuerkomix.php' id='dropdown-url'>neuer Komix</a>
        <a href='meinekomix.php' id='dropdown-url'>meine Komix</a>
      </span>
    </div>
  </div>
</div>
<div class="spacer"></div>
<div class="pagelist">
  <ul style="list-style-type: none;">
    <li>
      <a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a>
    </li>
    <li>
      <a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a>
    </li>
    <li>
      <a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a>
    </li>
  </ul>
</div><div class='pageframe'>
  <div class='pageimg' style='height: 99;'> 
    <div class='pageinline'></div> 
    <img src='komix\19_03_18_10_21_54-12.jpg' 
    alt='Seite 3' style='max-width:100%'/> 
  </div>
  <div class='pagetext'>Seite 3</div>
  <button class='floatbutt' onClick="location.href='neueseite.php?pageid=85&comicid=24'">bearbeiten</button>
</div>
</body>
<footer>
        <span>2018 - 2018 Alina Stobbe</span>
</footer

</html>

＆＃13;

Answer 3

这将完美地运作。我正在考虑下面的HTML代码：

<div class='pageframe'>
    <div class='pageimg'>
        <div class='pageinline'></div> <img src='komix\19_03_18_10_21_54-12.jpg' alt='Seite 3' style='max-width:100%' />
    </div>
</div>

然后用这些替换2个CSS类（.pageinline和.pageimg img）：

.pageinline {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}

.pageimg img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width:100%;
    color: #fff;
}

Div中的图像不是居中的

3 个答案: