Question

我已经尝试了一切，但没有任何效果！转换：翻译（50％）；似乎可以使用，但无法将其与确切的中心对齐。我什至试过离开：50％；用它。

我花了一周的时间弄清楚了，但我仍然做不到。

我要对齐的图像是尺寸为660 X 150的徽标。

<div id="rectangle"> </div>

<img class="logo" src="Untitled.png">

    <style> 

        .logo {
            position: fixed; 
            width: 35%;
            top: -5px;
            height: auto;

        }

        #rectangle {
            width: 100%;
            height:100px;
            background:#101010;
            position: fixed;
            top: 0;

        }


    </style>

编辑：不，我想将徽标与页面中心对齐。矩形div是徽标的背景色。

此外，这些答案均无效。：（

Answer 1

尝试使用div而不是使用<img>标签，并使用

将该图像作为backgorund

background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;

Answer 2

使用此

<div id="rectangle"><img class="logo" src="Untitled.png"></div>

和风格

<style> 

    .logo {
        margin-right:auto;
        margin-left:auto;
    }

    #rectangle {
        width: 100%;
        height:100px;
        vertical-align:center;
    }


</style>

Answer 3

尝试

<div id="rectangle"> </div>

<img class="logo" src="Untitled.png">
</div>
    <style> 

        .logo {
            width: 35%;
             height: 150px;
             }

  #rectangle {
      width: 100%;
      height: 150px;
     background: #101010;
     text-align: center;
   }




    </style>

Answer 4

尝试一下：-

使用a元素将display: flex; justify-content: center;对准中心。

img

Answer 5

您是否正在寻找类似的东西？是的，避免使用center标签，因为HTML5中已弃用该标签。

.center-my-content {
    height: 500px;
    width: 500px;
    position: relative;
    border: 1px solid #000;
    margin: 0 auto;
}
.logo{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<div id="rectangle" class="center-my-content">
  <img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>

Answer 6

从img中删除position: fixed;。

.logo {
  height: auto;
  width: 35%;
  display: block;
  margin: 0 auto;
  top: -5px;
}

#rectangle {
  position: fixed;
  width: 100%;
  height: 100px;
  background: #101010;
  top: 0;
}

<div id="rectangle">
  <img class="logo" src="image.png"></div>

徽标图像不会与中心对齐

6 个答案: