2つのインラインスパン要素を浮動小数点なしで左右に揃えるにはどうすればよいですか？ここで

Question

<div class="recentactivitycontent" > 
    <span class="myh4 grey pull-left"><img src="images/exampleuser.png" alt="user"/> Admin added one new member.</span>  

    <span class="myh4 pull-right"><img src="images/clock.png" alt="clock"/> 3 min ago</span>  
    </div> 

あなたはここに画像で見ることができるようにCSS

.recentactivitycontent span{ 
    display: inline-block; 
    line-height: 60px; 
    vertical-align: middle; 

} 

ある問題は、彼らが垂直に整列したままではないだろうということで、フロートのプロパティを使用してinside.When 2つのスパンの要素を持つ親のdivです。

インライン要素を正確に配置するためにtext-alignプロパティのような方法を使用したいと思います。高さ=行の高さと表示：inline-blockは可能ですが、高さのプロパティを設定しなければなりません。

任意の提案を歓迎.. Ryans同様

Answer 1

あなたがあなたのコンテナが表示必要フレキシボックス

を使用することができますフレキシボックス

.recentactivitycontent { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

.recentactivitycontent .pull-left { 
    display: flex; 
    align-items: center; 
} 

Answer 2

はこの回答：

.left, .right{ 
    position: absolute 
} 

.left:{ 
    left: 0 
} 

.right{ 
    right: 0 
} 

をしかし、あなたはrelativeのposition、fixedまたはabsoluteで親にそれらを置くために、考慮する必要があります。

ページの特定の位置に配置する必要がある場合は、上記の位置の親の絶対配置された要素を親と一緒に移動できますが、指定位置属性を持たないコンテナの絶対配置要素は、あなたのブラウザウィンドウに相対的な位置を持つ。

Answer 3

を通じて、このCSSを試してみてください：フレックス。 align-items：センター;

次に、あなたの子供はマージン左を使用して自分自身を整列するニーズにまたがる：オート（これは右に整列されます）

またはマージン右：オート - これはので

Answer 4

を左に整列され、あなたがtext-alignを使用する方法を尋ねられた場合、その値がjustifyである場合、遠端に要素を整列させる適切なtext-align-lastがあります。

.main{ 
 
    text-align-last: justify; 
 
} 
 

 
.child{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="child">hello</div> 
 
    <div class="child">hey</div> 
 
</div>

しかし、それはまだ多くのブラウザをサポートしていません。

Answer 5

これらのCSSを使用すると、画像全体とコンテンツ全体を自由に移動できます。

position：absoluteは、内部のdivを簡単に移動できるように、コンテンツを固定位置にします。

.myh4{ 
    position:absolute; 
} 
.pull-left{ 
    left:0; 
} 
.pull-right{ 
    right:0; 
}