对齐中心两个不同宽度的元素

Question

如何使两个元素对齐，使它们与中心线的距离相同，该线应位于包装器的中心。包装宽度也不固定，可能会改变。 http://jsfiddle.net/x2b2ax37/2/

    <div id="block">
<div id="wrapper">
    <span id="div1">2222</span>
    <span id="div2">2 %</span>
</div>
<div id="wrapper">
    <span id="div1">11</span>
    <span id="div2">100 %</span>
</div>
<div id="wrapper">
    <span id="div1">21</span>
    <span id="div2">0 %</span>
</div>
</div>

1 - 初始2 - 我的期望

Answer 1

你可以这样做：

（已更新为.class而不是#ID s）

JSFiddle - DEMO

.wrapper {
    position: relative;
}
.div1 {
    border: 1px solid #F00;
    right: 50%;
    position: absolute;
}
.div2 {
    border: 1px solid #000;
    position: relative;
    left: 50%;
    display: inline-block;
}
.block {
    border: 1px solid green;
    width: 200px;
}

<div class="block">
    <div class="wrapper">
        <span class="div1">2222</span>
        <span class="div2">2 %</span>
    </div>
    <div class="wrapper">
        <span class="div1">11</span>
        <span class="div2">100 %</span>
    </div>
    <div class="wrapper">
        <span class="div1">21</span>
        <span class="div2">0 %</span>
    </div>
</div>

Answer 2

Mary Melody早先演示的技巧是对子span元素，.div1和.div2使用绝对和相对定位的组合。

要确保顶部和底部边框边缘完全对齐，请应用display: inline-block 到span子元素。

诀窍是将.div2保留在流量中，左边距为50％，这为.div1提供了空间， 这将使用right: 50%绝对定位。

要控制两个span之间的间距，请向.div1添加1px右边距并保留 对称，在left: 1px上使用.div2。

.wrapper {
  position: relative;
  border: 1px dashed blue;
  margin-bottom: 10px;
}
.div1, .div2 {
  border: 1px dotted blue;
  display: inline-block;
}
.div1 {
  position: absolute;
  right: 50%;
  margin-right: 1px;
}
.div2 {
  position: relative;
  margin-left: 50%;
  left: 1px;
}

<div class="block">
  <div class="wrapper">
    <span class="div1">2222</span>
    <span class="div2">2 %</span>
  </div>
  <div class="wrapper">
    <span class="div1">11</span>
    <span class="div2">100 %</span>
  </div>
  <div class="wrapper">
    <span class="div1">21</span>
    <span class="div2">0 %</span>
  </div>
</div>

Answer 3

只需要将div1和div2设置为内联块并为它们设置宽度，并将文本对齐到不同的对齐方式。

Simple example

#div1 {
     border: 1px solid red;
    display:inline-block;
    width: 50px;
    text-align:right;
}

Answer 4

我不建议使用id，你可以使用类，因为你不能每次都重复相同的id，下面是代码更新以及现场演示。

＆＃13;

＆＃13;

.wrapper_block{
    text-align: center;
}
.wrapper_container span{
    display: inline-block;
    vertical-align: top;
}
.wrapper_container span span{
    display: block;    
}
.wrapper_left{
    text-align: right;
}
.wrapper_right{
    text-align: left;
}
.wrapper_left span{
    border: 1px solid red;
    margin-bottom: -1px;
}
.wrapper_right span{
    border: 1px solid black;
    margin-bottom: -1px;
}

＆＃13;

<div class="wrapper_block">
    <div class="wrapper_container">
        <span class="wrapper_left">
            <span>2222</span>
            <span>11</span>
            <span>21</span>
        </span>
        
        <span class="wrapper_right">
            <span>2 %</span>
            <span>100 %</span>
            <span>0 %</span>
        </span>   
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;