What is the best way to center text in the middle of a button?

Can someone help me center the text in the middle of a button like the image below? I tried using the class provided but it doesn't seem to be working.

https://i.sstatic.net/EK0Mf.png

<div class="row text-center">
    <div class="col-lg-6 align-items-center">
        <a href="#" class="btn btn-outline-index font-30">Home Product</a>
    </div>
    <div class="col-lg-6 justify-content-center">
        <a href="#" class="btn btn-outline-index font-30">Mobile Product</a>
    </div>
</div>

.btn-outline-index {
  color: #c76626;
  background-color: transparent;
  background-image: none;
  border: 4px solid #c76626;
  font-weight: 400;
  border-radius: 50px;
  height:150px;
  width:400px;
}
htmlcsstwitter-bootstrapbuttonbootstrap-4

Answer №1

To enhance the appearance of your buttons, simply include 

display: flex;align-items: center; justify-content: center;
in your buttons' CSS. For a deeper understanding of the flexbox layout, you can refer to the following link:

https://www.w3schools.com/css/css3_flexbox.asp

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";

.btn-outline-index {
  color: #c76626;
  background-color: transparent;
  background-image: none;
  border: 4px solid #c76626;
  font-weight: 400;
  border-radius: 50px;
  height:150px;
  width:400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="row text-center">
    <div class="col-lg-6 align-items-center">
        <a href="#" class="btn btn-outline-index font-30">Home Product</a>
    </div>
    <div class="col-lg-6 justify-content-center">
        <a href="#" class="btn btn-outline-index font-30">Mobile Product</a>
    </div>
</div>

This solution should work perfectly for you.

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

How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks! .template-banner{ width: 100%; height: auto; margin: 0; } ...

htmlcss

Tips for Creating Sand Text Effects in CSS (Using Text-Shadow)

I am attempting to create a CSS effect that resembles text written in the sand. Here is an example of what I am trying to achieve: As a newcomer to CSS, I would appreciate any guidance on how to make this effect possible. I have tried using the following ...

htmlcss

Extracting data from a tiered website within a specialized niche

I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...

pythonhtmlselenium-webdriverweb-scraping

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Emphasize a feature within a dynamic DIV

How can I highlight the span(class="tiny") element individually when its containing div is active or clicked? I have attempted to highlight the tiny span element without success, as only the entire div was highlighted. Here's the code snippet I' ...

javascriptjqueryhtmlcss

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

Code for jQuery function

How do I update textareas with values after submitting a form? Below is the HTML code: <form id="productionForm" name="productionForm" method="POST"> <input type="text" id='ime_2'/> <textarea id='text_2'>& ...

javascriptjqueryhtml

Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/ However, I am facing an issue with the leave transition. When the cancel button or close icon is click ...

csstailwind-cssalpine.js

Include the HTTP header in a GET request for an HTML hyperlink

Within my HTML code, I am using an <a> tag that will trigger a 302 redirect when clicked. However, I need to incorporate some HTTP headers into this GET request. Is there a way to achieve this without including the headers in the href attribute? Tha ...

javascriptjqueryhtmlajax

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

javascripthtml

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen. /**{ margin: 0; padding: 0; box-sizing: ...

htmlcsscss-positiontext-alignment

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

How to Delete an Added Image from a Dialog Title in jQuery

I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...

javascriptjquerycss

What is the best way to have my hamburger menu button switch colors after being clicked?

I am currently working with Bootstrap and I am attempting to change the background color of the hamburger menu button once it has been clicked. While I can successfully modify the color within the browser inspection tool, I am struggling to replicate this ...

htmlcsstwitter-bootstrap

Attempting to align three divs to the left, center, and right by utilizing Bootstrap CSS

I've been attempting to align three divs horizontally by floating them to the left, center, and right. Here is my code so far: HTML //to be centered div <div style="float:center"> <form> </form> <form> </ ...

htmlcsstwitter-bootstrap

Guide to aligning an image in the center of varying heights and widths with the use of HTML and CSS

I am trying to achieve a layout where all the images are centered, with five images in the first row and the rest in the second row, also centered. Below is the code I have attempted: <section id="Section"> <h1 class="sectionTit ...

htmlcssbootstrap-4

Sophisticated CSS design featuring a heart-shaped cutout from the background

I am trying to design a shape using only CSS (no images) that is the opposite of a heart shape. It's a bit hard to explain, so here is a visual representation: The blue represents the background, but the shape I am aiming for is not a heart, it is ac ...

cssshapescss-shapes

What is the process for incorporating a Glyphicon into the placeholder of a search bar using HTML and Bootstrap 5?

Here's a screenshot taken from my webpage I am looking to enhance the search bar by adding a search Glyphicon using Bootstrap 5. How can I achieve this? ...

htmlcssbootstrap-5

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

Implementing Bootstrap 4 Beta's server-side validation post error resolution

I'm currently working with Bootstrap 4.0.0.beta and am facing an issue with server-side validation. When adding the .is-invalid class to inputs that were invalid upon submission, even after the user corrects the error, the class remains, potentially c ...

csstwitter-bootstrapvalidationtwitter-bootstrap-4