Looking to have images and text aligned horizontally within a grid layout?

<div>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Click to Stage</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Howzaat</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Hurrey with the mission</span>
</button>
</div>
<div>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>Stage</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>catch me if you can</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 22px;
     vertical-align: middle; " src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />
    <span>jungle mission</span>
</button>
</div>

The code provided above is the one I am currently working on. I am facing an issue where the images' positions are not consistent across all buttons. My goal is to have the images fixed in one position for all buttons, aligned identically. I want both rows of buttons to have aligned images and text positioned in the middle of each button.

To achieve this, the images should be fixed in position, and the starting position of the text should be consistent in all buttons, aligned in the middle.

For reference, I need the alignment of both images and text to be consistent, similar to the example shown in the image here.

htmlcss

Answer №1

To create a styled button, include the following CSS properties:

display: flex;
justify-content: center;

Answer №2

To create your preferred grid layout, utilize flex properties (adjust width as needed; set to 700px for my example). Deleting the btn-wrapper class will make the container go full width.

Experiment with positioning the image and text within the button using properties like justify-content: center, justify-content: flex-start, justify-content: flex-end, justify-content: space-between, justify-content: space-evenly, justify-content: space-around.

For the best view, check out the Snippet in full screen mode!

Snippet Example:

:root {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;  
}

.flex {
    display: flex;
}

.row {
    flex-direction: row;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
    max-width: 25%
}

.full-width {
    flex: 0 0 100%;
    max-width: 100%;
}

.wrap {
    flex-wrap: wrap;
}

.btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-txt {
    color: #fff;
}

.img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    content:url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png");
}

.btn-wrapper {
 width: 700px;
}
<div class="btn-wrapper flex row full-width wrap">
    <div class="flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn one</span>
        </button>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn two</span>
        </button>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn three</span>
        </button>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn four</span>
        </button>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn five</span>
        </button>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">
            <img class="img" alt="Text" />
            <span class="btn-txt">Text for btn six</span>
        </button>
    </div>
</div>

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

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss

The process of downloading a webpage onto a computer is not completely successful

I recently created a webpage on WIX and attempted to download it using CTRL+S. However, when I loaded the site from my computer, certain elements were not functioning properly. Is there a specific piece of code that is missing when saving the webpage in th ...

htmlcss

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Calculating the Sum of Values in PHP using an HTML Form and Jquery

Looking to expand my knowledge of jQuery, I am attempting to create a straightforward page for practice. The goal is to develop a form that will send its values to PHP to be summed and return the results. These results will then be displayed dynamically on ...

phpjqueryhtmlformssum

Is it possible to animate share buttons using Framer Motion but staggering siblings?

I have a Share Icon that looks like: I'm looking to display the first 5 icons, with the 5th icon being the share icon. The remaining icons should appear below the share icon and expand to the right when someone taps or hovers over it (either tap or h ...

javascriptcssreactjsnext.jsframer-motion

Tips for avoiding css reanimation when clicking on a calendar

Recently, I have been experimenting with animating an ASP calendar using CSS and JQuery. My approach involves hiding the calendar initially with CSS and then fading it in when certain events occur. The calendar is contained within an AJAX update panel. How ...

jquerycssasp.netajax

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations

Applying Bootstrap's inline styling to adjust the width of a label

I'm having trouble adjusting the width of a Bootstrap label using inline styles. Here is my code: <td><span class="label label-info" style="width:30px; text-align:center; background-color:#6d8cbf"> TEXT </span></td> Unfort ...

htmlcsstwitter-bootstrapwidthinline

the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening. .table th:first-child, ...

javascripthtmlcss

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

javascriptcssbootstrap-4accordionsvg-transforms

CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place. Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) ef ...

htmlcsscss-animationsfadeinfadeout

What is the best way to trigger a jQuery animation when a section becomes visible using Fullpage.js?

Within my website, I've incorporated Fullpage.js and am interested in triggering jQuery animate functions as users scroll to specific sections. Although I tested methods like mouseenter, mouseover, and mouseleave from the prior section, they did not d ...

jqueryhtmlcssfullpage.js

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Preventing text wrapping in Boostrap 4 tabs - what's the solution?

Currently utilizing Boostrap 4 for a simple 4 tab horizontal navigation. The desired display on big screens is: "Some text [font-awesome-icon]" x 4 tabs. For smaller screens, it should show as: "[font-awesome-icon]". While the display works, the font-aweso ...

csstwitter-bootstrapbootstrap-4

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Manipulating JSON objects within a map using jQuery and Gson

I am working with a Java object that contains several nested object fields with basic fields in them. Here is an example: Template { String name; EmailMessage defaultEmailMessage; } EmailMessage { String emailSubject; String emailBody; } ...

javascriptjqueryhtmljsongson

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition