親アイテムブロックの下にドロップダウンメニューブロックを中央揃えにするにはどうすればよいですか？

Question

私は、サブアイテムが親アイテムの中央にくるようにドロップダウンメニューを編集しようとしています。私は最終的には、ドロップダウンメニューを明らかにするために親アイテムをぶら下げるたびに、残りのメニューがドロップダウンメニューの一番下に落ちることを見いだしただけで、中心化を達成しました。

サンプルへのリンクです。片側にすべてのコーディングがあります。ご協力いただきありがとうございます！私はちょうど:(

https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO

Answer 1

があなたの.dropdownにvertical-align: top;を追加してみCSSやHTMLと私は見てどのように多くのビデオやチュートリアルを問わずに出始めと読んで、私はちょうどそれを得るように見えることはできませんしていますそのようなCSS：

別のノートにも

CSS

.dropdown { 
    vertical-align: top; 
} 

私は.dropdown-contentに幅を削除し、代わりにPでしょう幅が.dropdownであることを確認して、それらが同じ幅であり、ホバー上で不自然な水平位置の変化がないことを確認してください。もう一つの解決策はドロップダウンの位置を作ることです：絶対;それらをリンクに対して相対的に配置します。しかしオフトピック：

Answer 2

ドロップダウンコンテンツの位置をabsoluteに設定できます。ドロップダウンを中央に配置するには、親の幅に合わせて配置する必要があります。これはあなたの.dropdown:hover .dropdown-content {で次のようになります。

display: block; 
position: absolute; 
left: calc((100% - 150px)/2); 
width: 150px; 
text-align: center; 

をさらに少し位置を説明するために： 100%はあなたの親の幅を指します。この違いと、指定した150pxのドロップダウンコンテンツのwidthをご利用ください。あなたのボックスをメニューボタンの下に配置したいので、この違いを左右に分割する必要があります。したがって、それぞれの側に余分な余白（(100% - 150px)/2）があります。

Answer 3

親要素と子要素の両方あなたがを配置しようとしている比較的親はposition: relativeプロパティは、あなたが達成しようとしているように見える結果には不適切である彼らのスタイリング、適用されていると述べています。

css position propertyとその値をお読みください。

説明：したがって後者の隣接の残りの部分を押し、その親要素にrelativeに配置された状態で自分の子要素は、定義によって独自に水平方向のスペースを占める、blockとしてを表示されています前記親要素の下のナビゲーション要素。

ソリューション：親：あなたが達成しようとしているように見えるナビゲーション効果は、一般的に、それはホバーに表示されますナビゲーション要素に比べて、絶対にサブナビゲーションを配置することによって行われます。このようにして、サブナビゲーションは、htmlコード内に階層的に配置されている要素の配置には影響しません。

CSS：スタックオーバーフローへ

が

.dropdown:hover .dropdown-content { 
    position: absolute; 
    display: block; 
    width: 150px; 
    text-align: center; 
    //To position the element: 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
}