Question

大家好，我只想知道如何水平对齐这些图片，因为垂直对齐的我只想水平对齐谢谢大家

<div id="myElement">
  <div id="myBar"></div>
</div>

<br>
<button onclick="loadIt()">Click ON</button>

img {
  border-radius: 50%;
}
table, th, td {
  border: 1px solid black;
	}
	.container {
	  position: relative;
	  width: 20%;
	}

	.image {
	  opacity: 1;
	  display: absolute;
	  width: 50%;
	  height: auto;
	  transition: .5s ease;
	  backface-visibility: hidden;
	}

	.middle {
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 3%;
	  transform: translate(0%, -20%);
	  -ms-transform: translate(50%, 50%);
	  text-align: center;
	}

	.container:hover .image {
	  opacity: 0.5;
	}

	.container:hover .middle {
	  opacity: 1;
	}

	.text {
	  background-color: #dbe0dc;
	  color: black;
	  font-size: 16px;
	  padding: 10px 20px;
	}
	.column {
	  float: left;
	  width: 33.33%;
	  padding: 5px;
	}
}

Answer 1

添加浮点数：左；在如下所示的容器类中，它将起作用。...

.container {
   position: relative;
   width: 20%;
   float: left;
}

Answer 2

您在这里：

将map添加到正文
从.image中删除了convertKeys()和text-align: center
将position: absolute和width: 50%添加到了.image
将display: block添加到了.container

max-width: 50%

display: inline-block

Answer 3

这是代码，此代码完美工作

CSS：

        img {
      border-radius: 50%;
    }
    table, th, td {
      border: 1px solid black;
        }
        .container {
          position: relative;
          width: 20%;
        }

        .image {
          opacity: 1;
          display: absolute;
          width: 50%;
          height: auto;
          transition: .5s ease;
          backface-visibility: hidden;
        }

        .middle {
          transition: .5s ease;
          opacity: 0;
          position: absolute;
          top: 50%;
          left: 3%;
          transform: translate(0%, -20%);
          -ms-transform: translate(50%, 50%);
          text-align: center;
        }

        .container:hover .image {
          opacity: 0.5;
        }

        .container:hover .middle {
          opacity: 1;
        }

        .text {
          background-color: #dbe0dc;
          color: black;
          font-size: 16px;
          padding: 10px 20px;
        }
        .column {
          float: left;
          width: 33.33%;
          padding: 5px;
        }

    }

    body ul li {
        list-style: none;
        display: inline-block;
    }

HTML：

<ul>
    <li>
        <div class="container">
            <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
            <div class="middle">
                <div class="text">Avatar sample</div>
             </div>
        </div>
    </li>

    <li>
        <div class="container">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
            <div class="middle">
                <div class="text">Avatar sample</div>
             </div>
        </div>
    </li>

</ul>

Answer 4

使用浮点数可能会遇到麻烦。最简单的方法是在所有内容周围添加另一个容器，然后使用flexbox。

HTML

<div class="icon-container">
  <div class="container">
    <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">Avatar sample</div>
    </div>
  </div>
  <div class="container">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">Avatar sample 2</div>
    </div>
  </div>
</div>

CSS：

.icon-container {
  display: flex;
}

如何水平对齐图片？

4 个答案: