如何将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元素锚定在两个其他元素之间的中心？

回答

相关问题