Centered button text, icon aligned to the right: justify-content

After implementing the HTML code snippet provided in the template, I encountered an issue with the alignment of the icon and text. Currently, they are using justify-content which is not aligning them as intended.

<button type="submit" class="btn btn-primary btn-block btn-icon-split">
        <span class="icon">
            <i class="fas fa-search"></i>
        </span>
        <span class="text">Search</span>
    </a>
</button>

I am seeking a solution to have the icon aligned left and the text centered within the button element.

.btn-icon-split {
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.btn-icon-split .icon {
    background: rgba(0,0,0,.15);
    display: inline-block;
    padding: .375rem .75rem;
}

.btn-icon-split .text {
    display: inline-block;
    padding: .375rem .75rem;
}

I have attempted different methods such as using float and bootstrap pull-right classes to achieve the desired layout without success.

The Bootstrap theme I am currently utilizing can be found here:

cssbootstrap-4

Answer №1

To address your issue, try removing the icon from the regular document flow by utilizing the absolute position:

.btn {
  width: 300px;
}

.btn-icon-split {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.btn-icon-split .icon {
    background: rgba(0,0,0,.15);
    display: inline-block;
    padding: .375rem .75rem;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.btn-icon-split .text {
    display: inline-block;
    padding: .375rem .75rem;
}
<button type="submit" class="btn btn-primary btn-block btn-icon-split">
        <span class="icon">
            <i class="fas fa-search"></i>
        </span>
        <span class="text">Search</span>
</button>

Another solution worth considering is inserting a 'helper' span after the text that matches the width of the preceding icon and making use of space-between.

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

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript

Position an anchor image at the top left corner, no matter the DTD or browser

Is there a way to keep an image with an href fixed in the top left corner of a webpage without affecting any other content and ensuring it functions consistently across different browsers and DTDs? I am facing the challenge of needing to provide a code bl ...

htmlcss

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Displaying the user's username upon logging into a website is a simple yet effective

I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...

phphtmlcss

Resolving the Table Issue with 'onclick' in Javascript

Apologies for the lack of creativity in the title, I struggled to come up with something fitting. Currently, I am engaged in the development of a user-friendly WYSIWYG site builder. However, I have encountered an obstacle along the way. I've devised ...

javascripthtmlcss

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

Hey there, I have a hidden div containing a range input: <div id="hiddencontainer" style="display:none;"> <input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/> </div> The ...

javascripthtmlcssdominput

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

phphtmlcss

What is the best way to center a CSS box on the screen?

I am attempting to center the login box on the screen, but when using position: absolute the background color changes to white. /* all */ .patua_font { font-family: 'Patua One', cursive; } .Roboto_font { font-family: 'Roboto&apo ...

htmlcssbootstrap-4

Replacing defined WordPress CSS styles

I was considering posting this query on the Wordpress Stack Exchange platform, but it's more related to CSS than Wordpress. Unless I need to delve into the CSS files of a plugin to customize the styles, should I go there to ask this question? I am t ...

css

I am encountering challenges and confusion with CSS

I am encountering an issue with my code that is causing some difficulties. The goal is to create a basic div with left, right, and center panes. The left pane loads perfectly, but the right pane, which has the same css styling, displays its children with a ...

htmlcss

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

Utilizing data attributes instead of IDs for connecting buttons and tabs in Javascript tab navigation

I'm currently exploring a new approach to creating Javascript tabs by utilizing data attributes instead of IDs to connect the tab with its content. Here's the concept in action: When clicking on a <button class="tab" data-tab-trigger="1"> ...

javascriptjqueryhtmlcsstabs

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

htmlcssnode.jsreactjssemantic-ui-react

Using Jquery to attach an event to a particular div which is part of a group of divs sharing

I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example: <div class="container"> <div class="menu"><p>Text ...

javascriptjqueryhtmlcssevents

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

htmlcssangularjs

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

htmlcssalignmentbootstrap-5

Leveraging @font-face for various styles and designs

Google web fonts presents the Droid Serif font in these styles: DroidSerif.ttf DroidSerif-Bold.ttf DroidSerif-BoldItalic.ttf DroidSerif-Italic.ttf I am interested in using the @font-face CSS rule to import all of these variations with the "Droid Serif" f ...

htmlcssfonts