Question

如何将具有绝对位置的所有元素分组并将它们全部放在父div中？我还将使用jquery添加和删除每个元素，并希望它们自动居中。所以在我的jsfiddle示例中，我想将所有三张牌分组并将它们集中在一起。谢谢。

HTML

<div class='wrap'>
  <li class='card card1'>Q</li>
  <li class='card card2'>K</li>
  <li class='card card3'>A</li>
</div>

CSS

.wrap{
  position: relative;
  height: 100px;
  background-color: green;
}
.card{
  width: 43px;
  height: 60px;
  border:1px solid black;
  border-radius: 5px;
  display: inline-block;
  background-color: white;
}
.card1{
  position: absolute;
  top:15px;
  left: 0px;
}
.card2{
  position: absolute;
  top:15px;
  left: 30px;
}
.card3{
  position: absolute;
  top:15px;
  left: 60px;
}

Answer 1

您可以在父级display: inline-block上使用text-align: center属性来管理您的卡片。

.wrap {
  background-color: green;
  position: relative;
  text-align: center;
  padding: 30px 0 0;
  height: 100px;
}

.content {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  padding: 0;
  margin: 0;
}

.content li {
  border: 1px solid black;
  background-color: white;
  display: inline-block;
  margin-left: -25px;
  border-radius: 5px;
  text-align: left;
  height: 60px;
  width: 43px;
}

 <div class='wrap'>
   <ul class="content">
     <li>Q</li>
     <li>K</li>
     <li>A</li>
     <li>K</li>
     <li>A</li>
   </ul>
 </div>

Answer 2

检查它是否适合你

https://jsfiddle.net/GirdhariAgrawal/ksha09jk/3/

CSS代码

.wrap{
  position: relative;
  height: 100px;
  background-color: green;
}
.card{
  width: 43px;
  height: 60px;
  border:1px solid black;
  border-radius: 5px;
  display: inline-block;
  background-color: white;

}
.card1{
  position: absolute;
  top:15px;
  left: 0px;
}
.card2{
  position: absolute;
  top:15px;
  left: 30px;
}
.card3{
  position: absolute;
  top:15px;
  left: 60px;

}
.content {
  position: absolute;
  left: 50% !important;
}

Answer 3

试试这个，希望它会有所帮助。

＆＃13;

.wrap{
  position: relative;
  height: 100px;
  background-color: green;
  left:50%
}
.card{
  width: 43px;
  height: 60px;
  border:1px solid black;
  border-radius: 5px;
  display: inline-block;
  background-color: white;
}
.card1{
  position: absolute;
  
  top:15px;
  left: 0px;
}
.card2{
  position: absolute;
  top:15px;
  left: 30px;
}
.card3{
  position: absolute;
  text-align: center;
  top:15px;
  left: 60px;
}
.group{
 background-color: green;
 left:0px;
}

＆＃13;

<html>
  <body>
    <div class='group'>
     <div class='wrap'>
      <li class='card card1'>Q</li>
      <li class='card card2'>K</li>
      <li class='card card3'>A</li>
     </div>
    </div>
  </body>
</html>

＆＃13;

Answer 4

您可以将align属性添加到div，其center值为<div class="wrap" align="center">

Answer 5

.wrap{
  position: relative;
  height: 100px;
  background-color: green;
  text-align: center;
  padding-top: 2rem;
}
.wrap>li{
	display: inline-block;
	height: 60px;
	width: 43px;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fff;
	margin-right: -2rem;
}

<div class='wrap'>
  <li>Q</li>
  <li>K</li>
  <li>A</li>
  <li>J</li>
</div>

你可以试试上面的代码，希望它能起作用......！

css如何以绝对位置居中多个元素

5 个答案: