フローティング要素を中心要素に

Question

イメージのセンタリングをどのようにして、イメージの右側にリンクを浮かせて真の中心のイメージ位置を維持するかについてはわかりません。次のイメージは私が試みているものの模型です。私は願っています

は、CSSを使ってこれを実現するための簡単な方法があります私はあなたが任意のHTML、またはあなたの仕事の短いスニップを投稿していない参照

Answer 1

。あなたは「Display: inline-block」を使用している場合しかし、私はこの問題はかなり確信して固定されています：P

Answer 2

あなたがラッパーと、この中心のラッパーへの絶対的な位置にあるテキストにmargin: 0 autoを設定すると水平方向の中心に画像を設定するpositioningを使用することができますdiv ：ここでは

.wrapper { 
 
    margin: 0 auto; 
 
    width: 150px; 
 
    position: relative; 
 
} 
 
.wrapper a { 
 
    position: absolute; 
 
    right: -100px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="wrapper"> 
 
    <a href="http://example.com">Learn more &gt;</a> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>

Answer 3

はそれを行うための一つの方法です。

position: relativeを画像とリンクの両方に適用します。イメージに左余白を50％に設定します。

左オフセットを使用すると、イメージとリンクの両方をイメージの幅の半分だけ移動できます（イメージの幅が固定されている/応答していないと仮定して）。

リンクの左マージンを使用して、画像とリンクの間の空白を制御します。

.wrap { 
 
    border: 1px dashed gray; 
 
} 
 
img { 
 
    margin-left: 50%; 
 
    position: relative; 
 
    left: -50px; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    position: relative; 
 
    left: -50px; 
 
    margin-left: 10px; 
 
}

<div class="wrap"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <a href="">Learn More</a> 
 
</div>