Align the center of two elements of different widths
How to make two elements aligned so that they are the same distance from the center line, which should be in the center of the wrapper. Also, the width of the wrapper is not fixed and can vary. 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 - Initial 2 - What I expect
source to share
You could achieve it like this:
(Updated with .class
es instead of #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>
source to share
The trick shown earlier by Mary Melody is to use a combination of absolute and relative positioning on the children span
, .div1
and .div2
.
To make sure the top and bottom bounding boxes are positioned accurately, apply display: inline-block
to the children span
.
The trick is to keep .div2
in flow with 50% left margin, which provides space for .div1
that to be absolutely positioned with right: 50%
.
To control the spacing between the two span
, add a 1px right margin to .div1
and keep the symmetry, use left: 1px
on .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>
source to share
I do not advise using id, u can use classes because u cannot repeat the same ids every time, below is the code update and also live demo.
.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;
}
<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>
source to share