Question

无法在“ head-logo” div中获得 img ，以将两个垂直居中位置和水平居中位置。

我尝试了CSS解决方案，例如：

1）

.head-logo img  {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

2）

.head-logo img {
vertical-align: middle;
}

3）

    .head-logo img  { 
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex; 
    justify-content: center; 
    -ms-align-items: center; 
    align-items: center; 
    }

等

<div class="head-container">
    <div class="head-logo">
        <img src="img\logo.svg" height="70" width="70">
    </div>
    <div class="head-menu">

    </div>
</div>
            div {
                border: dotted 1px;
            }
            .head-container {
                width: 80%;
                height: 100px;
                margin: auto;
                padding: 5px;
                background-color: aqua;
            }
            .head-logo {
                vertical-align: middle;
                width: auto;
                height: 100px;
                background-color: red;
                float: left;
            }
            .head-logo img {

            }

当前结果是 img 停留在父div的左上角，我需要将其从所有方向居中放置。

可能我缺少css的新功能，期待您的帮助。

           div {
                border: dotted 1px;
            }
            .head-container {
                width: 80%;
                height: 100px;
                margin: auto;
                padding: 5px;
                background-color: aqua;
            }
            .head-logo {
                vertical-align: middle;
                width: auto;
                height: 100px;
                background-color: red;
                float: left;
            }
            .head-logo img {

            }

<div class="head-container">
    <div class="head-logo">
        <img src="https://via.placeholder.com/150x200/O%20https://placeholder.com/" height="70" width="70">
    </div>
    <div class="head-menu">

    </div>
</div>

Answer 1

您可以尝试对象匹配-例如：

.head-logo img {
    object-fit: contain;
    height: 100%;
}

对象适合的演示（包括用于ie的图像填充）https://codepen.io/jakob-e/pen/Pxwzpw

/* object fit polyfill */
//  is object fit supported
if (document.body.style.objectFit === undefined) {
    //  loop through all images    
    [].slice
        .call(document.querySelectorAll('img'))
        .map(function (img) {
        //  image has background-size cover or contain        
        if (['cover', 'contain']
            .indexOf(getComputedStyle(img).backgroundSize) !== -1) {
            //  use src as background image            
            img.style.backgroundImage = "url(" + img.src + ")";
            //  replace src with transparent gif
            img.src = 'data:;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        }
    });
}

/* add this */
.head-logo img {
   height: 100%;
   object-fit: contain;
   background-size: contain;     /* used by polyfill */
   background-repeat: no-repeat; /* used by polyfill */
   
}



div {
    border: dotted 1px;
}
.head-container {
    width: 80%;
    height: 100px;
    margin: auto;
    padding: 5px;
    background-color: aqua;
}
.head-logo {
    vertical-align: middle;
    width: auto;
    height: 100px;
    background-color: red;
    float: left;
}

<div class="head-container">
    <div class="head-logo">
        <img src="https://i.pinimg.com/originals/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" height="70" width="70">
    </div>
    <div class="head-menu">

    </div>
</div>

Answer 2

div{
  height: 300px;
  width: 300px;
  padding: 10%;
  background: red;
  box-sizing: border-box;
}

div img{
  
  height: 100%;
  width: 100%; 
}

<div>
  <img src="https://media.gettyimages.com/photos/trent-boult-of-new-zealand-bowls-during-day-two-of-the-second-test-picture-id1087035928" alt="">
</div>

Answer 3

尝试以下操作：（忽略长图像链接：p）

div {
  border: dotted 1px;
}
.head-container {
  width: 80%;
  height: 100px;
  margin: auto;
  padding: 5px;
  background-color: aqua;
}
.head-logo {
  width: 150px;
  height: 100px;
  background-color: red;
  float: left;
  display: flex;
  justify-content: center;
}
.head-logo img {
  display: block;
  margin: auto;
  vertical-align: middle;
}

<div class="head-container">
    <div class="head-logo">
        <img src="data:image/jpeg;base64,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" height="70" width="120">
    </div>
    <div class="head-menu">

    </div>
</div>

Answer 4

几乎没有办法。我首选的是

empty

            div {
                border: dotted 1px;
            }
            .head-container {
                width: 80%;
                height: 100px;
                margin: auto;
                padding: 5px;
                background-color: aqua;
            }
            .head-logo {

                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
                
                 overflow: hidden;
                
                position: relative;
           
            }
            .head-logo img {
              position: absolute;
              width: 100%;
              height: auto;
              
              top: -50%;
              right: -50%;
              bottom: -50%;
              left: -50%;
              margin: auto;
            
            }

此解决方案的好处是，它将始终位于父容器的中心，在旧版浏览器中效果很好，如果您希望徽标保持相同大小或将其设置为，则可以将img宽度设置为“ 100px”等固定值缩放到父容器

<div class="head-container"> <div class="head-logo"> <img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" height="70" width="70"> </div> <div class="head-menu"> </div> </div>在父容器中，请确保较大的图片不会从容器中溢出

img定位在div容器内

4 个答案: