Question

我似乎遇到一些问题，无法一次将三个图像对齐到中心，我具有float：left属性，但是当删除该属性时，图像在页面左侧彼此堆叠。从代码中可以看出，我只担心circle和column，而不必担心column2和circle2，因为我在使用第一行查看是否可以得到正确的结果，然后将其也应用于第二行。

更新： 问题已解决。

* {
    -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
        box-sizing: border-box;
         
    }

    figure {
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
      border-radius: 2%;
    }

    .rowfirst {
   flex: 1 1 25%;
   margin: 20px 10px;
    width: 20.00%;
    padding: 6px;
    image-orientation: from-image;
    -webkit-transform: scale(1);
	  transform: scale(1);
	  -webkit-transition: .3s ease-in-out;
	  transition: .3s ease-in-out;
    border-radius: 2%;
    pointer-events: none;
}

.rowsecond {
    flex: 1 1 25%;
   margin: 20px 10px;
    width: 20.00%;
    padding: 6px;
    image-orientation: from-image;
    -webkit-transform: scale(1);
	  transform: scale(1);
	  -webkit-transition: .3s ease-in-out;
	  transition: .3s ease-in-out;
    border-radius: 2%;
    pointer-events: none;
}

.rowfirst:hover {
  -webkit-transform: scale(1.3);
    	transform: scale(1.3);
}

.rowsecond:hover {
  -webkit-transform: scale(1.3);
    	transform: scale(1.3);
}


/* Clearfix (clear floats) */
.container {
    content: "";
    clear: both;
    image-orientation: from-image;
    padding: 60px;
    display: flex;
    flex-wrap: flex-start;
}

<h1>Portfolio</h1>


</head>

<div class="container">

  <div class="rowfirst">
    <figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
  </div>

  <div class="rowfirst">
   <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
  </div>

  <div class="rowfirst">
    <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
  </div>

  <div class="container">

  <div class="rowsecond">
    <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
  </div>

  <div class="rowsecond">
    <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
  </div>

    <div class="rowsecond">
      <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
    </div>

    <div class="rowsecond">
      <figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
    </div>
  
</div>
</div>




</body>
</html>

Answer 1

亚当。

您可以使用以下代码，因为您的案例与容器块中的图像有关：

del list_of_numbers[int(chosen_number_PC)]

如果您希望将图像对齐为嵌入式元素，则应使用以下属性：

.circle {
margin: 2%;
image-orientation: from-image;
text-align:center;
}

当您评论上述解决方案不起作用时，我建议您将其与flex-box方法配合使用-使用flex-box，您可以将图像集中在行（和页面）的中间。这些行也将响应。尝试以下代码：

display: block;
margin: 0 auto;

欢呼

对齐图像和列居中时出现问题

1 个答案: