css我怎么能中心多个元素的绝对位置

我如何分组所有具有绝对位置的元素，并将它们集中在一个父级div中？我也将使用jQuery添加和删除每个元素，并希望它们自动居中。因此，在我的jsfiddle示例中，我想将所有三张卡片组合在一起。谢谢。css我怎么能中心多个元素的绝对位置

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; 
}

来源

2016-07-22 lys916

您可以在父用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>

来源

2016-07-22 10:57:28

这就是我要找的。谢谢！ – lys916

@ lys916欢迎您） –

有没有一种方法可以为每张卡片附上绝对位置？我没有意识到你已经删除了你的版本。当我点击它时，我正在寻找一些定位动画。 – lys916

试试这个，希望这将有助于。

.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; 
 
}

<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>

来源

2016-07-22 10:34:46 Pirate

我尝试中心的所有卡..不信。对不起，如果我没有在我的问题中说清楚。 – lys916

您可以align属性与center值添加到div这样<div class="wrap" align="center">

来源

2016-07-22 10:36:15

我正在尝试将卡片居中..而不是字母。对不起，如果我没有说清楚。 – lys916

是的，我的回答将中心卡 –

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

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

你可以试试上面的代码，希望它会我的作品...！如果它的工作原理

来源

2016-07-22 10:42:23

我想要卡堆叠在一起的效果，因为我使用每张卡的绝对位置。这消除了这种影响。 – lys916

比引用我的更新片段@ lys916 –

检查你

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; 
}

来源

2016-07-22 10:42:49

这很接近，但我如何使它从卡的中间中心？如果我再添加两张牌，那么它就会向右移动。像这样... https://jsfiddle.net/ksha09jk/4/ – lys916

工作版，谢谢。 https://jsfiddle.net/ksha09jk/7/ – lys916

请你是我的朋友:-) –

css我怎么能中心多个元素的绝对位置

回答

相关问题