The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below).

The relevant CSS code is as follows:

ul.cms {
    width: 85%;
    margin: 0px auto !important;
    text-align: center;
}

ul.cms li {
    width: 24.99%;
    float: left;
    background: none !important;
    padding: 0px !important;
    margin: 0px ;
    text-align: center;
    color: #666
}

ul.cms .has-icon {
    margin: auto;
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 140px;
    margin: 0px 8px;
}

a.ja-typo-btn {
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    color: #333;
    background: none;
    text-align: center;

}

a.ja-typo-btn:hover,
a.ja-typo-btn:active,
a.ja-typo-btn:focus {
    border: none;
    background-position: bottom;
    color: #333;
}

a.ja-typo-btn-big {
    text-align: center;
    border: none;
    font-size: 110%;
    line-height: normal;
    font-weight: normal;
}

a.ja-typo-btn-big span {
    padding: 15px 23px;
    border: none;
    display: inline-block;
    text-align: center;
}

a.btn-green { background-color: #74af57 !important; border: none; }
a.btn-green:hover,
a.btn-green:active,
a.btn-green:focus { border-color: #74af57;  color: #fff; }

a.btn-green span { border: none; }

When used in conjunction with the following HTML Code (I have removed extraneous information from the image provided):

<ul class="cms clearfix">   
    <li>
        <a class = "has-icon icon1" 
          href = "barista-course-melbourne/espresso-basics" 
          target = "_parent"></a>    
        <a class = "ja-typo-btn btn-green ja-typo-btn-big btn-big-green" 
          href="barista-course-melbourne/espresso-basics" 
          target="_parent"
          style="text-align: center; display: inline-block;">
            <span>COURSE INFO</span>
        </a>
    </li>
</ul>

On mobile devices, the rendered button does not appear centered.

Below is a screenshot for reference:

Any assistance or guidance would be highly appreciated.

Here's the complete HTML code utilized:

<div style="display: block;">
    <p> </p>
    <ul class="cms clearfix">
        <li>
            <a class="has-icon icon1" href="barista-course-melbourne/espresso-basics" target="_parent">
            </a>
            <h4>LEVEL 1</h4>
            <h4>Espresso Basics</h4>
            <br />
            <h4>3 hours - $99</h4>
            <span>An introductory barista course where you will learn fundamental barista skills.</span> 
            <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/espresso-basics" target="_parent">
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon2" href="barista-course-melbourne/latte-art" target="_parent">
            </a>
            <h4>LEVEL 2</h4>
            <h4>Latte Art</h4>
            <br />
            <h4>2 hours - $150</h4>
            <span>Learn to pour like a pro. You will learn to pour rosettas, hearts and tulips. </span>
            <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/latte-art" target="_parent" style="text-align: center;">  
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon3" href="barista-course-melbourne/advanced-barista-training" target="_parent">
            </a>
            <h4>LEVEL 3</h4>
            <h4>Advanced Barista</h4>
            <br />
            <h4>3 hours - $250</h4>
            <span>Do you have what it takes to become a top barista? Take your career to the next level! <br />
            </span>
            <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/advanced-barista-training" target="_parent" style="text-align: center;">
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon4" href="barista-course-melbourne/home-barista-training" target="_parent"></a>
            <h4>HOME</h4>
            <h4>Barista Classes</h4>
            <br />
            <h4>Various Classes</h4>
            <span>Take a range of our home barista classes in the comfort of your own home.<br /></span>
            <a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="barista-course-melbourne/home-barista-training" target="_parent" style="text-align: center;">            
                <span>   LEARN MORE   </span>
            </a>
        </li>
</ul>
<div class="button-avartar clearfix">
    <p> </p>
    <p style="text-align: center;"> {modal href="barista-course-melbourne/index.php?tmpl=component&amp;id=2333" class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red"}        
        <span>Upcoming Barista Course Dates</span>
        {/modal}
    </p>
<p> </p>
</div>

htmlcssresponsive-design

Answer №1

Within the li element, apply the styles text-align:center and float:none to the button.

Answer №2

Remove the width: 24.99% and float: left from ul.cms li.

Answer №3

To make the li element fill up 100% of the width, you can set it inline or within the external CSS file.

<ul class="cms clearfix">   
    <li style="width: 100%">
        <a class = "has-icon icon1" 
          href = "barista-course-melbourne/espresso-basics" 
          target = "_parent"></a>    
        <a class = "ja-typo-btn btn-green ja-typo-btn-big btn-big-green" 
          href="barista-course-melbourne/espresso-basics" 
          target="_parent"
          style="text-align: center; display: inline-block;">
            <span>COURSE INFO</span>
        </a>
    </li>
</ul>

fiddle: http://jsfiddle.net/nuxbox/LhDKb/

Answer №4

I'm uncertain about the source of the issue. Applying text-align:center to the li element should center all inline-block elements within it. Can you provide the complete HTML structure for reference? It's possible there may be something disrupting the alignment between the has-icon and ja-typo-btn classes.

Answer №5

To solve the problem, you can set position:relative on the li element and use 

position:absolute; top:0; left:50%;
on the button.

Answer №6

When editing your CSS, ensure that you are not applying margin multiple times:

ul.cms .has-icon {
    margin: auto; /* defined once here */
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 140px;
    margin: 0px 8px; /* then redefined here (remove this line) */
}

To avoid conflicting margins, consider using the following setup instead:

ul.cms .has-icon {
    margin: 0 auto; /* centers the button, adjust values if needed for top and bottom margins */
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 140px;
}

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

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

What could be the reason for the dropdown-item not being displayed?

I've encountered an issue with my navigation bar while using Bootstrap 5. The dropdown item (Login) for the user icon is not appearing as expected. Below is the code snippet in question: <button class="btn dropdown-toggle" type="butt ...

htmldropdownbootstrap-5

Display of Navigation Bar in Angular is Not Proper

Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...

javascripthtmlcssangular

Using JSTL within JavaScript

Can JavaScript be used with JSTL? I am attempting to set <c:set var="abc" value="yes"/> and then later retrieve this value in HTML and execute some code. The issue I'm facing is that the c:set always executes even when the JavaScript condition ...

javascripthtmljspjstl

What is the best way to create a transparent section within a div to reveal the content below?

My goal is to create a user interface that resembles the design shown in this image https://i.stack.imgur.com/GfiZ8.png One issue I'm facing is how to make the center of the top div circular and transparent, just like in the reference image. I consi ...

htmlcssvue.jsnuxt.js

What is the process for generating a MediaWiki article that contains preloaded text derived from an HTML form input?

I am in the process of developing a private wiki using MediaWiki, and I have designed a Special page with HTML elements to serve as a template entry form. My goal is to create a new WikiPage based on the input provided by the user, following a similar s ...

phphtmlmediawikimediawiki-extensionsmediawiki-templates

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

javascripthtmlangulardropdown

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

javascriptcss

Move the final column from one table to another table given a specific criterion

I have a task where I need to extract the last column from table3 and transfer it into table4. For example, consider table3: Names Process_id Total construction 1 1111 construction_1 1 0000 engineering 1 22 ...

jqueryhtml

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

I'm dealing with an HTML code that can dynamically change table data based on user selection. Here's the snippet of my HTML code: Select an option: <select name='set' id="set" class="selectpicker" onchange='displayFields(this. ...

javascriptjqueryhtml

Should I use a single CSS file or separate CSS files for each page?

As I construct my website pages, I often ponder whether it's best to utilize separate stylesheets for each page or to have one comprehensive stylesheet for the entire site. In terms of loading efficiency, wouldn't having individual files be more ...

cssstylesheet

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

What could be causing the iPhone to trim the 20px right padding of my website?

Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...

iphonecss

What is the best way to assign an active class to a specific footer ID on an HTML page using AngularJS?

I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected. .directive('activeLink', ['$location', function (location) { return { restrict: 'A', ...

javascripthtmlangularjscss

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

javascriptcssreactjsmaterial-ui

Change the background color of a table cell based on its value with the help of JavaScript

I am attempting to apply color to cells in an HTML table (generated automatically by Python and Django) based on the content of the cells. Below is my table. I want to specifically color the column "status". Whenever the word "Cloture" appears, I would li ...

javascripthtmlhtml-tabledjango-formsdjango-templates

What is preventing the element from being positioned at the bottom of the container?

I have a vertical bar chart with 5 different colored sub-containers. I'm trying to position the 'chicken' sub-container at the bottom of the bar without any bottom-margin, but so far my attempts have been unsuccessful. When I try using absol ...

htmlcssposition

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

The uninterrupted execution of a server-side script is occurring without the need for

Greetings! I am currently working on a web project that combines HTML5 and Java with the Hibernate framework, utilizing AJAX as a bridge between them. My approach involves developing servlets that are connected to HTML5 forms and use AJAX to send data. Ho ...

javaajaxhtmlhibernateservlets