CSSドロップダウンメニュー内のハイパーリンクをウェブページの中央に配置するにはどうすればいいですか？

Question

asp.net webformで外部スタイルシートとhtmlハイパーリンクを使用してドロップダウンメニューを作成しました。私はウェブフォームの残りの部分が中心になっているので、メニューをウェブページの中心に置こうとしています。ここまでは私のコードです。

/*Menu System Styles*/ 
 
.container { 
 
    overflow: hidden; 
 
    background-color: #0176C5; 
 
    font-family: 'Tahoma', Geneva, sans-serif; 
 
    text-align:center; 
 
} 
 

 
.container a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    display:inline-block; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px;  
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #2ad32d; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

  <div class="container"> 
 
       <a href="home.aspx">Home</a> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">About Us</button> 
 
        <div class="dropdown-content"> 
 
         <a href="#">Our Mission and Values</a> 
 
         <a href="LocalProjects.aspx">Local Projects</a> 
 
         <a href="NationalProjects.aspx">National & Worldwide Projects</a> 
 
        </div> 
 
       </div> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">News & Events</button> 
 
        <div class="dropdown-content"> 
 
         <a href="#">Recent News</a> 
 
         <a href="Events.aspx">Upcoming Events</a> 
 
        </div> 
 
       </div> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">Prayer</button> 
 
        <div class="dropdown-content"> 
 
         <a href="DiocesanPrayer.aspx">Diocesan Prayer Circle</a> 
 
         <a href="Prayer.aspx">Wave of Prayer</a> 
 
         <a href="IrelandPrayer.aspx">All Ireland Prayer Cycle</a> 
 
        </div> 
 
       </div> 
 
       <a href="home.aspx">Find a Branch</a> 
 
       <a href="home.aspx">Contact Us</a> 
 
       <a href="home.aspx">Resources</a> 
 
       <a href="home.aspx">130 Celebration</a> 
 
      </div>

Answer 1

私はあなたのCSSのコードを変更しました。私はそれが助けて欲しい

/*Menu System Styles*/ 
 
.container { 
 
    overflow: hidden; 
 
    background-color: #0176C5; 
 
    font-family: 'Tahoma', Geneva, sans-serif; 
 
    text-align:center; 
 
} 
 

 
.container a { 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
.dropdown { 
 
    display:inline-block; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px;  
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    background-color: inherit; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #2ad32d; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="container"> 
 
       <a href="home.aspx">Home</a> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">About Us</button> 
 
        <div class="dropdown-content"> 
 
         <a href="#">Our Mission and Values</a> 
 
         <a href="LocalProjects.aspx">Local Projects</a> 
 
         <a href="NationalProjects.aspx">National & Worldwide Projects</a> 
 
        </div> 
 
       </div> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">News & Events</button> 
 
        <div class="dropdown-content"> 
 
         <a href="#">Recent News</a> 
 
         <a href="Events.aspx">Upcoming Events</a> 
 
        </div> 
 
       </div> 
 
       <div class="dropdown"> 
 
        <button class="dropbtn">Prayer</button> 
 
        <div class="dropdown-content"> 
 
         <a href="DiocesanPrayer.aspx">Diocesan Prayer Circle</a> 
 
         <a href="Prayer.aspx">Wave of Prayer</a> 
 
         <a href="IrelandPrayer.aspx">All Ireland Prayer Cycle</a> 
 
        </div> 
 
       </div> 
 
       <a href="home.aspx">Find a Branch</a> 
 
       <a href="home.aspx">Contact Us</a> 
 
       <a href="home.aspx">Resources</a> 
 
       <a href="home.aspx">130 Celebration</a> 
 
      </div>