ツールチップを相対的な親に揃える

Question

私はこの問題を解決するために 2 日間を費やしましたが、一人では解決できないことに気づきました。親を基準にしてツールチップを中央に配置しようとしています。これは私のコードです =>

リーリー リーリー リーリー

期待される結果は次のようになります =>

＃＃＃手伝ってもらえますか？

float、text-align、justify-content、margin: 0 autoを使用してみましたが、表示されるものはすべて中央揃えになりましたが、何も機能しませんでした ＃＃＃ありがとう。

Answer 1

解決策が見つかったようです。追加した： ＃＃＃ リーリー

すべてを中央に配置し、次のようにします:

リーリー

垂直オフセット。

リーリー リーリー リーリー

Answer 2

中心基準となる要素を相対要素として設定します。あなたの場合、.btnClass と一貫性を保つ必要があります。このようにして、クラスはそのコンテンツをラップできます。

リーリー

これで、ツールチップを中央に配置できます。左の位置を 50% として定義し、transform と translateX(-50%) を使用して、transform 属性が要素自体の -50 % 移動するようにします。はすでに 50% 左に移動されているため、結果は完全に位置合わせされます。

リーリー

最終結果:

リーリー リーリー リーリー