如何將HTML元素錨定在兩個其他元素之間的中心？

請遵守這個簡單的jsfiddle：http://jsfiddle.net/mark69_fnd/vtLrt/10/如何將HTML元素錨定在兩個其他元素之間的中心？

HTML：

<div class="char"> 
    <div> 
    <div class="char">A1</div> 
    <div class="char anchorToMiddle">D1</div> 
    <div class="char anchorToRight">G1</div> 
    </div> 
    <div> 
    <div class="char">A2</div> 
    <div class="char anchorToMiddle">D2</div> 
    <div class="char anchorToRight">G2</div> 
    </div> 
    <div> 
    <div class="char">A3</div> 
    <div class="char">B3</div> 
    <div class="char">C3</div> 
    <div class="char">D3</div> 
    <div class="char">E3</div> 
    <div class="char">F3</div> 
    <div class="char">G3</div> 
    </div> 
</div>

CSS：

.char{ 
    display: inline-block; 
} 


.anchorToRight { 
    float: right; 
}

輸出：

enter image description here

我怎樣才能改變HTML和/或CSS ，以便標記爲anchorToMiddle（D1和D2）的元素在D3中間的右上方對齊？

謝謝。

來源

2012-11-19 mark

我試圖找到一些JavaScript的解決方案（因爲問題被標記爲JavaScript）。

如果在「anchorToMiddle」中將文本對齊設置爲「中心」，文本將居中，但僅限於指定元素的寬度。要做到這一點，B3..F3被包裹另一個DIV（ID爲「charspan」）內：那麼這個新的div的寬度計算

<div id="charspan" class="char"> 
    <div class="char">B3</div> 
    <!-- etc. --> 
</div>

，並應用於類「anchorToMiddle」。

var elems, i, width, span; 
elems = document.getElementsByClassName("anchorToMiddle"); 
span = document.getElementById("charspan"); 
width = parseInt(window.getComputedStyle(span).width); 
for (i = 0; i < elems.length; i++) { 
     elems[i].style.width = width + 'px'; 
}

更新小提琴：http://jsfiddle.net/Espesen/vtLrt/14/

來源

2012-11-19 19:13:31

我希望有一個HTML/CSS唯一的解決方案。但是，在沒有其他選擇的情況下...... – mark

div.anchorToMiddle 
{ 
    width:someWidthValue less than parent; 
    margin-left:auto; 
    margin-right:auto; 
}

來源

2012-11-19 18:27:05 thatidiotguy

所以，需要一個javascript來計算'someWidthValue'？ – mark

恩，我不知道。它是你的頁面。該div的寬度是基於其他東西的寬度還是恆定的？ – thatidiotguy

它不是恆定的。 – mark

如果你給它一個適當的寬度，然後用text-align:center;屬性，它應該得到固定。

我已經更新您的FIDDLE

來源

2012-11-19 18:39:34 defau1t

爲什麼不只是做一個3X7的表呢？

<table> 

    <tr> 

     <td>A1</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>D1</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>G1</td> 

    </tr> 

    <tr> 

     <td>A2</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>D2</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>G2</td> 

    </tr> 

    <tr> 

     <td>A3</td> 
     <td>B3</td> 
     <td>C3</td> 
     <td>D3</td> 
     <td>E3</td> 
     <td>F3</td> 
     <td>G3</td> 

    </tr> 

</table>

來源

2012-11-19 18:53:41

數據不是表格。 A1，A2 ......是爲了簡化例子。實際上他們是帶有領域的div區塊。 – mark

如何將HTML元素錨定在兩個其他元素之間的中心？

回答

相關問題