中心對齊Flex項目中的絕對元素

我試圖水平對齊Flex項目中的兩個絕對定位元素。中心對齊Flex項目中的絕對元素

這是我目前CodePen

HTML：

<div class="stepper-wrapper"> 
    <ul class="step-wrapper" > 
    <li class="step__bubble"></li> 
    <li class="step__circle"></li> 
    </ul> 
    <ul class="step-wrapper" > 
    <li class="step__bubble"></li> 
    <li class="step__circle"></li> 
    </ul> 
</div>

CSS：

.stepper-wrapper { 
    display: flex; 
    flex-direction: row; 
} 
ul { 
    border: 1px solid grey; 
    height: 0px; 
    position: relative; 
    top: 40%; 
    min-width: 100px; 
    flex: 1; 
    li.step__bubble { 
    display: inline-block; 
    vertical-align: middle; 
    } 
    li.step__bubble::before { 
    content: ""; 
    position: absolute; 
    top: -9px; 
    left: calc(50%); 
    display: block; 
    width: 16px; 
    height: 16px; 
    border: 2px solid grey; 
    border-radius: 50%; 
    background: white; 
    } 
    li.step__circle { 
    width: 8px; 
    height: 8px; 
    border: 1px solid red; 
    border-radius: 50%; 
    display: block; 
    position: absolute; 
    top: -4px; 
    left: calc(50% + 1px); 
    } 
}

我想要做的是：

讓灰色圓圈在行上垂直和水平對齊。縱向不是真正的pb，我可以設置一個固定值，因爲.stepper-wrapper的高度將被固定。水平需要適應性，這是我卡住的地方。
具有紅圈右側的灰色圓圈

我試圖用calc()功能，並將其設置爲(50% - width_of_element_in_px/2)兩個圓圈中，但我不知道爲什麼，每個像素好像是〜10px的。

THX對您有所幫助

來源

2016-10-28 DlafCreative

歡迎LESS用戶通過calc()和字符串插值PWNED俱樂部
我少用，因爲5年，但仍時有發生的時間:(

被

的sooo TL;博士calc()是和是一個LESS函數，它的編譯器將一些結果愉快地輸出（可能是50％+ 10（剝離）=> 60％）
如果要LESS編譯器輸出calc()的CSS。 3級功能，你需要escape它，就是它包裹在~"calc(50% + 5px)"！

Codepen

編輯：又見https://stackoverflow.com/a/17904128/137626
EDIT2：找不到的條目LESS文檔OO約calc但問題是http://lesscss.org/usage/#command-line-usage-options解釋（搜索文本「鈣」）。 strict-math是一個很酷的選項，但您必須確保其他人已將其激活（默認情況下不會如此）

來源

2016-10-28 10:17:30 FelipeAls

這並不回答問題。他只使用CSS。 –

艾哈我再次被騙了。安慰知道它仍然發生在你身上^^。非常感謝，這是工作。另一個問題：你做了（50％+ 5px）。這5px是8px的元素寬度除以2 + 1px的邊界，是不是？ – DlafCreative

@ atulquest93他正在使用LESS。請檢查他的Codepen：它被寫入「CSS（LESS）」。還要檢查他的代碼：關於'li'的3條規則在'ul'規則中被疊加。這不是有效的CSS（現在），但有效的LESS/Sass代碼。 – FelipeAls

中心對齊Flex項目中的絕對元素

回答

相關問題