2016-07-22 70 views
1

我如何分組所有具有絕對位置的元素,並將它們集中在一個父級div中?我也將使用jQuery添加和刪除每個元素,並希望它們自動居中。 因此,在我的jsfiddle示例中,我想將所有三張卡片組合在一起。謝謝。css我怎麼能中心多個元素的絕對位置

https://jsfiddle.net/ksha09jk/2/

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

回答

2

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

+0

這就是我要找的。謝謝! – lys916

+0

@ lys916歡迎您) –

+0

有沒有一種方法可以爲每張卡片附上絕對位置?我沒有意識到你已經刪除了你的版本。當我點擊它時,我正在尋找一些定位動畫。 – lys916

0

試試這個,希望這將有助於。

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

+0

我嘗試中心的所有卡..不信。對不起,如果我沒有在我的問題中說清楚。 – lys916

0

您可以align屬性與center值添加到div這樣<div class="wrap" align="center">

+0

我正在嘗試將卡片居中..而不是字母。對不起,如果我沒有說清楚。 – lys916

+0

是的,我的回答將中心卡 –

0

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

你可以試試上面的代碼,希望它會我的作品...!如果它的工作原理

+0

我想要卡堆疊在一起的效果,因爲我使用每張卡的絕對位置。這消除了這種影響。 – lys916

+0

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

1

檢查你

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

這很接近,但我如何使它從卡的中間中心?如果我再添加兩張牌,那麼它就會向右移動。像這樣... https://jsfiddle.net/ksha09jk/4/ – lys916

+0

工作版,謝謝。 https://jsfiddle.net/ksha09jk/7/ – lys916

+0

請你是我的朋友:-) –