Question

我在div中有一些元素。我想将它们居中对齐垂直和水平。好像他们在这样的一行中

我尝试了以下几个stackoverflow示例margin自动和许多其他，就像您在我的css文件中看到的那样，但是如果可以的话，请走运，请给出答案并解释其工作方式将很有帮助。谢谢。

<div id="tiritaContainer">
          <div class="tirita">

              <div  class="tiritas"><img id="tirita1"  
src="assets/pictures/Front house.jpg" alt=""/></div>
              <div  class="tiritas"><img id="tirita2"  
src="assets/pictures/28.jpg" alt=""  ></div>
              <div  class="tiritas"><img id="tirita3"  
src="assets/pictures/27.jpg" alt=""  ></div>

          </div>
          <img class="next" src="assets/pictures/arrow-right.png" 
alt=""/>

          </div>




*{margin:0px;
padding: 0px;
}

nav{
position:absolute;
left:0px;
width:100%;
background-color: #3333ff;
height: 40px;
text-align: center;
}
nav ul{
margin: 0;
padding:0;
display: inline-block;
}
.nav li{
  text-align: center;
  list-style-type: none; 
  float: left; 
  width: 150px;

}
.nav li a{
text-decoration: none;
text-align: center;
font-size: 150%;
color: yellow;
line-height: 40px; /*set same as height in nav to center line 
vertically.*/
display:block;
}
.nav li a:hover{
background-color: chartreuse;
color:black;
}
#logo{
width:20%;
border-radius: 35%;
margin-top: auto;
margin-bottom: auto;
}

#mainImg{
height: 65vh;
width: 50vw;
border: 3px solid black;
margin-left:auto;
margin-right:  auto;
}

.tirita{
/*display:block;*/

margin: 0 auto;
height: 105px;
width:400px;





}
#gallery img{
display: none;
}
.tiritas img{
height:100px;
width: 100px;
border: 3px solid blue;
float:left;



}
.tiritas:hover{
cursor: pointer;
border-color: red;
transform: scale(1.5);
}
center{
padding:2%;
}
.prev,.next{

vertical-align: middle;

}
.prev{

float:left;
margin: 0 auto;
}
.next{
float:right;


}
#tiritaContainer{
display: inline-blockblock;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

我想使同一行中的左右箭头对齐中心垂直和水平

Answer 1

您可以使用flexbox轻松进行布局。这里需要的是display:flex和justify-content:center用于水平对齐，align-items:center用于垂直对齐。

*{box-sizing:border-box}
.container{width:100%;display:flex;justify-content:center;align-items:center;border:1px red solid}

img{display:block;width:100px;margin:10px}

<div class="container">
    <img src="http://via.placeholder.com/100x150/fff000" alt="">
    <img src="http://via.placeholder.com/100x100/ff0000" alt="">
    <img src="http://via.placeholder.com/100x120/0000ff" alt="">
</div>

中心div元素

1 个答案: