How can I align the logo in the center of a ul

Many have attempted to resolve this issue, creating makeshift solutions or simply settling for an outcome that just "gets by." But what is the optimal approach? I have nearly finished something, yet for some reason, the logo isn't centered, rather the entire unordered list (ul) is misaligned. This is the current output I am experiencing.

However, when the text lengths are equal, this is how the result appears:

Below is my HTML structure:

<div class="navbar">

    <ul>

        <li>
            <a class="navbarLinks" href="#">Big Text Here</a>
        </li>

        <li>
            <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a>
        </li>

        <li>
            <a class="navbarLinks" href="#">Small Text</a>
        </li>

    </ul>

    <div class="divider"></div>

</div>

And my CSS styling:

.navbar
{
    margin:0 auto;
    text-align: center;
    z-index: 9999;
    margin-top: 10px;
}

.navbar ul
{
    display: inline-block;
    list-style-type: none;
    margin:0 auto;
    padding: 0px;
}

.navbar li
{
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
}

.navbarLinks
{
    color:#ccc;
    margin: 20px;
    text-align:center;
    display:block;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-decoration: none;  
    font-family: arial;
    font-size: 20pt;
    font-weight: bold;
}

.navbarLinks:hover
{
    color:#fff;
}

.navbarLogo
{
    padding-bottom: 0px;
    text-align: center;
}

How should I rectify this coding issue?

htmlcssnavigation

Answer №1

One simple way to achieve this layout, although it may be considered a bit of a workaround, is to assign a percentage value of 40% for the width of the left and right <li> elements. This will keep them equal in size while creating space for the logo in the center.

Alternatively, utilizing a flexbox layout provides a more precise solution by allowing you to specify how any extra space should be distributed between the two text sections:

.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}

This CSS code essentially sets the ul element to act as a flex container, aligning its children in a row and distributing any additional space evenly between the links.

For demonstration, you can view a basic example on this live fiddle.

Keep in mind that flexbox properties are not universally supported across all browsers, with initial support appearing in IE10. Additionally, the syntax has undergone multiple revisions, necessitating potential adjustments in your code. Resources like the Sass flex mixin can assist in addressing these variations.

Alternatively, a combination of both methods can be employed. Browsers lacking flexbox compatibility will default to treating the elements as inline-block, resulting in a slightly different display with a slightly off-centered logo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform HTML into PDF while maintaining the original letter spacing

We are in need of converting numerous files to enable search and word highlighting functionality in a web browser, as well as server-side indexing for the searchable words. I have previously utilized an online service like (Step 1, Step 2 on linked page) ...

htmlpdfconverters

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

javascripthtmlcssreactjs

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

Can someone assist me with updating the image source for it to display correctly within the div element?

I am currently working on a code that displays the URL (data-owner_logo) in my div after indexing JSON. Rather than just displaying the URL string, I want the actual logo image to appear in the div: $('a').on('click', function () { ...

htmljsonimageurl

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

javascripthtmlvue.js

Embarking on the GSAP journey

I'm attempting my first animation using GSAP, but no matter what I try, nothing seems to be working. I've even tried using example code without success. Within my PHP file, I have the following code snippet: <head> <script src="https:/ ...

javascriptjquerycssgsap

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

javascripthtmlfirebase

How can HTML be added in CodeBehind using C# in a WebForm?

I have a method that generates tools based on the number value inserted, and I also have another control called "DateTimePicker" that provides a textbox and date+time picker function. However, the issue arises when I call the dynamic_tools method and inse ...

c#htmlasp.netwebwebforms

What is the process for incorporating the JavaScript "star" feature from Google's search results page?

In the Google search results, each entry has a star that users can click to indicate if the result is good or not. This feature is likely implemented using JavaScript. I'm interested in implementing a similar function in my own web application. I wou ...

javascripthtmlajax

Automatically changing the color of the navigation bar text

I am experiencing an issue with the navigation bar on my webpage. Currently, it is styled with white text against a dark background color using the following CSS code snippet: a{ color: white; text-decoration:none; font-weight:bold; font-s ...

csshtmltwitter-bootstrapnav

Is there a way to incorporate borders into JqTree?

I attempted the following .jqtree-tree .jqtree-element { border-color: black; border-width: 10px; } It seems that I may be overlooking certain elements to which this CSS should be applied ...

jquerycssjqtree

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

I am in the process of developing a chat application and my goal is to achieve a smooth scrolling animation that automatically moves the page down to the bottom of the div when dynamic messages are loaded. <ul id="messages"> <li ...

javascripthtmlanimationscrollnative

Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with ...

javascriptcssimagescrollresponsive-design

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

jqueryhtmlcssjquery-uijquery-ui-dialog

The div element is experiencing a resizing issue

I am currently working on the following HTML markup: <div class="card" style="height:100%"> <div class="controlPanelContainer"> <div class="card" style="background-color:yellow;height:200px"> </div> <div class= ...

cssbootstrap-4

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

htmlangulartypescript

SignalR's postback interrupts the functionality of jQuery actions

On my screen, I have a widget that updates data and changes its class based on server-side interactions. It also responds to mouse clicks. To notify multiple clients of updates simultaneously, I'm using SignalR. The problem arises when I wrap everythi ...

c#javascriptjqueryhtmlasp.net

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

How can we make the Facebook like button display the fan count as the counter?

Can the Facebook like button be customized to display the fan count as the counter, and also update the fan count when clicked (like/unlike)? I've searched through forums and tutorials but haven't found a solution yet. It appears that the standar ...

phphtmlfacebookfacebook-like