【问题标题】:How to vertically and horizontaly align an image in the center? [duplicate]如何在中心垂直和水平对齐图像? [复制]
【发布时间】:2017-09-22 16:48:22
【问题描述】:

我已经尝试了这个网站上的所有答案,但都不起作用!

尝试过的助手、绝对位置和一些 CSS。

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>

body {

    background-color: rgb(18,19,19);
}

</style>
</head>
<body>

<img src="image.png" width="513" height="396" />

</body>
</html>

【问题讨论】:

    标签: html css


    【解决方案1】:

    要使 img 居中,您需要父母来握住它(宽度为 100%)

    在屏幕中间见下面的例子。

    对于行的中心,您可以删除 height: 100vh;

    .centered {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    <!DOCTYPE html>
    <html>
    <title>Title</title>
    
    <head>
      <style>
        body {
          background-color: rgb(18, 19, 19);
        }
      </style>
    </head>
    
    <body>
      <div class="centered">
        <img src="image.png" width="513" height="396" />
      </div>
    
    </body>
    
    </html>

    【讨论】:

      【解决方案2】:

      试试这个,它会将任何类型的元素与其父元素居中:

      .centerElement{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      
      <img class="centerElement" src="image.png" width="513" height="396" />
      

      【讨论】:

        【解决方案3】:

        body {
          position: absolute;
          top:0;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
        }
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <title>JS Bin</title>
        
        </head>
        <body>
         <div>
           <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="">
         </div>
        </body>
        </html>

        【讨论】:

          【解决方案4】:

          使用position: absolute 并给出topleft 将图像置于中心位置。

          更好的方法:使用flex

          .image{
            position:absolute;
            top:46vh;
            left:46vw;
            transform: translate(-50%, -50%);
          }
          <!DOCTYPE html>
          <html>
          <title>Title</title>
          <head>
          <style>
          
          body {
          
              background-color: rgb(18,19,19);
          }
          
          </style>
          </head>
          <body>
          
          <img class="image" src="https://i.stack.imgur.com/CE5lz.png" width="50" height="50" />
          
          </body>
          </html>

          【讨论】:

          • 由于某种原因这不起作用。调整窗口大小时,图像也不会停留在中心。
          • 您现在可以查看@Vulkan,已更新。我已经使用 vh 和 vw 来实现视口响应。
          • @bhansa 如果可以的话,单独提供topleft 可能在所有情况下都有效...
          • @kukkuz 那你有什么建议,请告诉。
          • 见 Elias MP 的answer
          【解决方案5】:

          将您的 img 放入 a 然后使您的图像位置相对,并使用 padding-top 和 padding-left 将您的图像居中在您想要的位置!

          【讨论】:

            猜你喜欢
            • 2011-07-25
            • 2018-06-23
            • 1970-01-01
            • 2012-11-09
            • 1970-01-01
            • 1970-01-01
            • 2012-05-17
            • 2014-05-26
            • 1970-01-01
            相关资源
            最近更新 更多