Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

Question

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

I have transformed my navigation menu into a series of CSS circles with text inside. The issue I am facing is that the text spills out unevenly based on the amount of content in each circle. To address this, I used a JavaScript solution to center-align the text horizontally within the circles. However, I now encounter a new problem where the baselines of the circles are not consistent due to varying text lengths. Is there a straightforward CSS fix for this, or will I need to calculate and adjust the heights of each list item using JavaScript?

.html

<ul class="list-inline nav-horizontal">
    <li role="presentation" class="active">
        <a href="#1" data-toggle="tab" class="stylish">#1</a>
    </li>
    <li role="presentation">
        <a href="#2" data-toggle="tab" class="stylish">#2</a>
    </li>
    <li role="presentation">
        <a href="#3" data-toggle="tab" class="stylish">#3</a>
    </li>
    <li role="presentation">
        <a href="#4" data-toggle="tab" class="stylish">#4</a>
    </li>
    <li role="presentation">
        <a href="#5" data-toggle="tab" class="stylish">#5</a>
    </li>
</ul>

.css

.list-inline {
    display: inline-block;
    padding: 6px; 
}

.stylish {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 8px solid #ED1B24;
    font-size: 20px;
    color: #BBAE92;
    text-align: center;
    text-decoration: none;
    background: none;
    line-height: 1.1em;
}

.stylish:hover, li.active .stylish {
    color: #fff;
    text-decoration: none;
    background: #ED1B24;
}

.js

$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
    position : "relative",
    "top" : function() {
        return ($(this).parent().height() - $(this).height()) / 2
    }
});

javascript jquery html css

Answer 1

Answer №1

Check out this code snippet! http://jsfiddle.net/hd8donbn/3/

.nav-horizontal li:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.stylish {
    display: inline-block;
    text-decoration: none;
    color: #ED1B24;
    vertical-align: middle;
    max-width: 90%
}

If you're interested, I can provide a detailed explanation for each part of the code :D

Answer 2

Check out this code snippet! http://jsfiddle.net/hd8donbn/3/

.nav-horizontal li:before {
    content:'';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.stylish {
    display: inline-block;
    text-decoration: none;
    color: #ED1B24;
    vertical-align: middle;
    max-width: 90%
}

If you're interested, I can provide a detailed explanation for each part of the code :D

Answer 3

Answer №2

After some experimentation, I discovered a straightforward CSS fix. By incorporating vertical-align:text-top; into the styling of the .list-inline li class, I was able to successfully resolve the problem.

Answer 4

After some experimentation, I discovered a straightforward CSS fix. By incorporating vertical-align:text-top; into the styling of the .list-inline li class, I was able to successfully resolve the problem.

Answer 5

Answer №3

Hey there, I took the liberty of crafting my own markup specifically tailored to your requirements instead of following what was outlined in your initial question. Check it out below:

XHTML

<ul>
    <li class="active"><a href="#">small</a></li>
    <li><a href="#">medium sized content</a></li>
    <li><a href="#">slightly larger content</a></li>
    <li><a href="#">quite a big chunk of content</a></li>
    <li><a href="#">extremely large block with a lengthy word as well</a></li>
</ul>

CSS

*{
        margin: 0;
        padding: 0;
    }
    ul {
        display: inline-block;
        list-style: none; /*remove bullet points for `li`*/
    }

    li {
        border-radius: 50%; /*create rounded edges;*/
        overflow: hidden; /*hide any text exceeding boundaries*/
        float: left; /*align items horizontally at their top positions*/

        border: 8px solid #ED1B24;
        display: block;
        height: 140px;
        text-align: center;
        width: 140px;
    }
    li a{
        padding: 0 5px; /*prevent border interference*/
        word-wrap: break-word; /*wrap long words if necessary*/
        text-decoration: none;
        color: #BBAE92;

        /*the next 4 properties vertically center a child element*/
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);

    }
    li.active,
    li:hover{
        cursor: pointer; /*give a link-like appearance on hover*/
        background: #ED1B24;
    }
    li.active a,
    li:hover a{
        color: #fff; 
    }

Finally, here's some basic JavaScript

$('li').click(function(){
    $(this).child('a').click();
});

Answer 6

Hey there, I took the liberty of crafting my own markup specifically tailored to your requirements instead of following what was outlined in your initial question. Check it out below:

XHTML

<ul>
    <li class="active"><a href="#">small</a></li>
    <li><a href="#">medium sized content</a></li>
    <li><a href="#">slightly larger content</a></li>
    <li><a href="#">quite a big chunk of content</a></li>
    <li><a href="#">extremely large block with a lengthy word as well</a></li>
</ul>

CSS

*{
        margin: 0;
        padding: 0;
    }
    ul {
        display: inline-block;
        list-style: none; /*remove bullet points for `li`*/
    }

    li {
        border-radius: 50%; /*create rounded edges;*/
        overflow: hidden; /*hide any text exceeding boundaries*/
        float: left; /*align items horizontally at their top positions*/

        border: 8px solid #ED1B24;
        display: block;
        height: 140px;
        text-align: center;
        width: 140px;
    }
    li a{
        padding: 0 5px; /*prevent border interference*/
        word-wrap: break-word; /*wrap long words if necessary*/
        text-decoration: none;
        color: #BBAE92;

        /*the next 4 properties vertically center a child element*/
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);

    }
    li.active,
    li:hover{
        cursor: pointer; /*give a link-like appearance on hover*/
        background: #ED1B24;
    }
    li.active a,
    li:hover a{
        color: #fff; 
    }

Finally, here's some basic JavaScript

$('li').click(function(){
    $(this).child('a').click();
});

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for injecting animation into a DIV

What is the best way to utilize the outcome of the initial API request when making a second API call in AngularJS

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Updating the total of textboxes using jQuery

Leveraging AJAX with React Router

I am having trouble getting the Express Router delete method to function properly when using mongoose with ES8 syntax

Creating an application for inputting data by utilizing angular material and javascript

Creating a responsive single webpage using HTML/CSS

differences between using form's get method and sending an angular $http.get request

The child process is arriving empty, which is causing a requirement

Creating a function to limit the display value of Material UI Autocomplete similar to Material UI Multiple Select's renderValue

"Is there a way to target an element within another element that has inline styles using

Mobile Website Blog Page With Dual Sidebars Issue

The iframe failed to load on the external server

Create a stylish div slider with interactive menu using Jquery

Exploring the Differences Between NPM Jquery on the Client Side and Server

Illuminate the current page

Excluding specific e2e tests in Protractor: A guide

Real estate for a targeted audience

Check if the element is not present in the array, then add it to the array