<ul class="logo">
<li class="navtabs dropdown">
<a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<%= image_tag('Thumbnailimagestufffurrreal.jpg', class: "center-block") %>
</a>
<ul class="dropdown-menu" id="theproblemdropdown" aria-labelledby="dropdownMenu2">
<li class=""><%= link_to "Rails", jobs_path %></li>
<li class=""><%= link_to "Scrape", contracts_path %></li>
</ul>
</li>
</ul>
The issue at hand is the alignment problem where the image appears centered on the page but the dropdown menu does not. Various attempts have been made to address this without success.
Adding a center-block class on the ul#theproblemdropdown caused the dropdown to always be visible without actually centering it properly.
Even using Center-text, which has worked in other cases, did not provide the desired result in this scenario. Suggestions from others have included using absolute positioning for the dropdown-menu ul within an encompassing div with relative position, however, this also yielded no success.
To see the direct problem, here is a reference to the page: . It seems that while the image is centered, the link spans the entire width of the page causing the misalignment.
Any ideas or suggestions on how to resolve this issue?
Edit: Following Ronan Louarn's suggestion, a work-around was implemented. Although not perfect, it aligns the dropdown menu with the image. The main issue was the li.dropdown taking up the full width of the page. By setting ul.logo col-xs-12 and li col-xs-2 with an offset of 5, the li became smaller than the logo image resulting in close to centered alignment if not perfectly so.
<ul class="logo col-xs-12">
<li class="dropdown col-xs-2 col-xs-offset-5">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<%= image_tag('ThumbRailsJobHub.jpg', class: "center-block") %>
</a>
<ul class="dropdown-menu col-xs-12 text-center" aria-labelledby="dLabel">
<li class=""><%= link_to "Jobs", jobs_path %></li>
<li class=""><%= link_to "Contracts", contracts_path %></li>
</ul>
</li>
</ul>