一箇中心與多個兄弟姐妹沿着元件

我有一些數在它的跨距，其可以是或可以不是相等的寬度的一個div。我知道我可以使用text-align: center來使div中的所有內容都居中。但是，我想選擇一個特定的跨度，並將其指定爲真正的中心，而不是中心是跨度序列的中點。一箇中心與多個兄弟姐妹沿着元件

我有一個想法來模擬這種效果是：我有我想要的中間元素與兩個集裝箱的左側和右側;左邊的是正確的，反之亦然。這些容器可以容納div中的其他內容。如果我能得到這兩個容器，以填補剩餘的空間等量，這將有定心中間元素，同時保持與中心對齊左右內容的效果。基本上，這需要將兩個容器的寬度設置爲div中剩餘空間的一半。（我不想改變中間div的大小。）這是可能的只用CSS？

實施例：用4個跨度，如何我指定跨度2爲真正的中心？

div { 
 
    width: 500px; 
 
    padding: 4px; 
 
    border: 1px dotted black; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 100px; 
 
    text-align: center; 
 
    margin: 4px; 
 
    box-sizing: border-box; 
 
    border: 1px dotted black; 
 
} 
 
#b { 
 
    /* ??? */ 
 
}

<div> 
 
    <span id="a">1</span> 
 
    <span id="b">2</span> 
 
    <span id="c">3</span> 
 
    <span id="d">4</span> 
 
</div>

來源

2016-12-31 codebreaker

大量的答案爲奇數（例如，3），其中中間的一個爲中心的元素，但是我有興趣看到一個優雅的解決方案爲偶數個元件（例如4），其中第二一個居中。 –

我建議用3欄佈局做到這一點，並使用CSS表結構。使第1和第3列取總寬度的50％，中間一列將只有0，但它會重新計算寬度以適應內容，並保持中心，因爲它是在表中。

也把white-space: nowrap;存在的情況下有多個單詞內，但根據需要，如果僅存在一個字或固定的寬度將其刪除。

.container { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    padding: 4px; 
 
    border: 1px solid grey; 
 
} 
 
.item-a { 
 
    width: 50%; 
 
    text-align: right; 
 
} 
 
.item-b { 
 
    text-align: center; 
 
    white-space: nowrap; /* remove as needed */ 
 
} 
 
.item-c { 
 
    width: 50%; 
 
} 
 
.item span { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 
.item-b span { 
 
    padding: 0 50px; /* for demo only */ 
 
}

<div class="container"> 
 
    <span class="item item-a"> 
 
    <span>1</span> 
 
    </span> 
 
    <span class="item item-b"> 
 
    <span>2</span> 
 
    </span> 
 
    <span class="item item-c"> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    </span> 
 
</div>

jsFiddle

來源

2016-12-31 18:18:41 Stickers

這可以通過使用Flexbox的完成。您可以在div使用display:flex;，並在2nd span使用flex-grow:1;。這樣你就可以用這個跨度覆蓋整個div。

由於第一和第三跨度的寬度已經平等的，你必須在死點的第二個跨度。然後在第二天使用flex-basis以獲得所需的寬度。

div.container{ 
 
    width: 500px; 
 
    padding: 4px; 
 
    border: 1px dotted black; 
 
} 
 
div.row{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 70px; 
 
    text-align: center; 
 
    margin: 4px; 
 
    box-sizing: border-box; 
 
    border: 1px dotted black; 
 
    transform:translate(50%,0); 
 
} 
 
#b { 
 
}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <div class='container'> 
 
    <div class="row"> 
 
     <span id="a">1</span> 
 
     <span id="b">2</span> 
 
     <span id="c">3</span> 
 
     <span id="d">4</span> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-31 15:38:04 ab29007

我試圖做到的，是那種這個倒數的：跨度2佔據其自然寬度（或在這種情況下，100像素），另外兩個佔用的剩餘空間以相等的量。 – codebreaker

@codebreaker我想我設法把第二跨度放在中間。查看我的更新回答 – ab29007

如果它解決了您的問題，請接受我的答案。如果不是，那麼請告訴我，我必須對我的答案做些什麼，因爲我最後的評論讓我感到困惑。 – ab29007

您可以使用Flexbox的。基於this answer，

.outer-wrapper { 
 
    display: flex; 
 
    padding: 4px; 
 
    border: 1px dotted black; 
 
} 
 
.item { 
 
    margin: 4px; 
 
    text-align: center; 
 
    border: 1px dotted black; 
 
} 
 
.left.inner-wrapper, .right.inner-wrapper { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: flex-start; 
 
    min-width: -webkit-min-content; /* Workaround to Chrome bug */ 
 
} 
 
.left.inner-wrapper { 
 
    justify-content: flex-end; 
 
} 
 
.animate { 
 
    animation: anim 5s infinite alternate; 
 
} 
 
@keyframes anim { 
 
    from { min-width: 0 } 
 
    to { min-width: 50vw; } 
 
}

<div class="outer-wrapper"> 
 
    <div class="left inner-wrapper"> 
 
    <div class="item animate">1. Left</div> 
 
    </div> 
 
    <div class="center inner-wrapper"> 
 
    <div class="item">2. Center</div> 
 
    </div> 
 
    <div class="right inner-wrapper"> 
 
    <div class="item">3. Right</div> 
 
    <div class="item">4. Right</div> 
 
    </div> 
 
</div> 
 
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>

這將嘗試到中心所需的元素，但它會在殼體一側被推不適合，以防止重疊。

來源

2016-12-31 19:39:17 Oriol

花了我一分鐘來弄清楚動畫中發生了什麼，但這真的很酷。我認爲彈性盒基於空格工作，但不是寬度。這不是這裏發生的事情，是嗎？ – codebreaker

@codebreaker解釋是在相關答案中，我使用三個代表左，中，右的彈性框。左邊和右邊的最初大小爲0寬度，然後它們長大以填充剩餘空間，所以中心區域變爲居中。隱含的'min-width：auto'可以防止重疊。 – Oriol

一箇中心與多個兄弟姐妹沿着元件

回答

相關問題