css

Question

要素の隣、ただしその中央に配置されるツールチップを作成するのを楽しみにしています。上下に配置して、要素の水平方向の中央に配置するのは簡単です。しかし、垂直に（要素の右側または左側に、その要素の高さの中央に垂直に配置されて）そうする方法はありますか？

私の目的では、要素の高さは固定されており（既知）、ツールチップの高さは固定されていません。これは、さまざまなテキストコンテンツを含めることができるためです。また、ツールチップは要素の子になることができます。

ただし、両方の高さが固定されていない場合の方法についても興味があります（不明であり、コンテンツによって異なる場合があります）。高さによって、要素とツールチップの高さがわかります。幅は既知で固定できます。

score 38 · Accepted Answer

これはかなり遅いですが、あなたの質問を正しく理解した場合に動作する例を示す codepen の例を作成しようとしました。

CSS 変換を使用します。

たとえば、transform:translateX(-50%);は要素を ITSELF の 50% 左に移動します。positionこれで、 andbottomまたはtopor leftorを使用して親に位置合わせし、rightそれ自体の寸法だけ移動できます。

お役に立てれば！

score 3 · Accepted Answer

CSS と jQuery の使用 -

.div{
    top:50%
}

jQuery

var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');

score 2 · Accepted Answer

両方の高さが分からない場合は、次の 2 つの方法しかありません。

親display: tableと子display: table-cellを設定し、 vertical-align: middle.
CSS3 Flexbox の使用: http://www.w3.org/TR/css3-flexbox/ただし、ブラウザーのサポートが制限されている: http://caniuse.com/#search=flexbox

このトピックに興味がある場合は、より多くのヒントが記載された優れた記事があります: http://www.vanseodesign.com/css/vertical-centering/

ご覧のとおり、要素の高さを知らず、CSS3 も使用せずに要素を垂直方向に配置する唯一の方法は、display: table-cell.

score 1 · Accepted Answer

コンテンツの高さがわかっている場合、ツールチップを中央に配置する最も簡単な方法は、ツールチップをコンテンツの高さに設定するline-heightことです。