Button with improperly aligned text

I'm having an issue with two buttons where the text on one button is not centered.

.mail_download_csv_btn{
  width: 100px !important;
  font-size: 12px !important;
}

.margin_right_10{
  margin-right:10px;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <button type="button" class="btn btn-info height_30 width_110  mail_download_csv_btn">Download CSV</button>
                <button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>

The text Download CSV is not aligned in the center of the button.
Any suggestions or assistance would be appreciated.

Thank you.

htmlcsstwitter-bootstrap

Answer №1

Your buttons are currently centered, but the width is limited, causing text overflow on the right side. To fix this issue, modify:

.mail_download_csv_btn{
  width: 100px !important;
  font-size: 12px !important;
}

to

.mail_download_csv_btn{
  width: 125px !important;
  font-size: 12px !important;
}

I have adjusted the width to 125px, ensuring that the buttons have enough space. If you prefer a different width, simply adjust or remove the width attribute accordingly.

For example, with a larger width:

.mail_download_csv_btn{
  width: 125px !important;
  font-size: 12px !important;
}

.margin_right_10{
  margin-right:10px;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <button type="button" class="btn btn-info height_30 width_110  mail_download_csv_btn>Download CSV</button>
                <button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn>Mail PDF</button>

Answer №2

Your button is not centered because it has a width set that is too small for the text to fit properly.

To fix this, remove the width: 100px !important from your .mail_download_csv_btn CSS and the text will have enough space to be centered.

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

If you want all buttons to have the same size, avoid setting an explicit width as it may vary depending on the browser. Instead, consider dynamically adjusting the button widths based on the widest button using a method like setting all buttons to the width of the widest button.

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 personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

htmlselectcordova

After pressing the button to access the sidebar, all I see is a plain white screen

I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistan ...

javascripthtmlcss

I am facing an issue where the display property of inline-block is taking precedence over

I am facing a challenge in placing 2 containers side by side. These containers have a thick white border and are initially hidden until a click event reveals them. The containers are given a class of "hidden". However, in order to align the div containers ...

htmlcss

Ionic directive ng-disabled not functioning as expected

Upon running the Ionic application, I noticed that the radio button is not being disabled even with the use of ng-hide.<input type="radio" ng-disabled="true"> ...

htmlangularjsionic-framework

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

Function fails to execute after drop-down menu selection

I set up a double drop-down feature and implemented my function calling code. However, after choosing an option from the drop-down menus, the function is not getting executed. The purpose of the code is to trigger a specific function based on the selectio ...

javascripthtml

Using `require` in place of `script` tags in a three.js file when working with Node.js environment

Instead of using the html script tag, I have implemented javascript require in my three.js file for node.js. Here is a snippet from an html file: <script src="../build/three.js"></script> <script src="js/controls/DragControls.js"></s ...

javascripthtmlnode.jsthree.jsbrowserify

What is the way to utilize a scope variable within an ng-repeat filter?

I'm feeling a bit lost trying to navigate through this task with AngularJS. As a newbie to the framework, I'm struggling to find out how to achieve what I need. I have a group of users that I am looping through by using ng-repeat, but I can' ...

javascripthtmlangularjs

What are some ways to address the performance challenges associated with resizing images for responsive design?

When it comes to certain images, I find that scaling them based on the page size is the best way to make them responsive. <img class="img_scale" src="img.png" alt"this img doesn't have width and height definition"> In my CSS: .img_scale{wid ...

htmlcssimageperformance

Stopping jQuery fadeOut from setting the display property to 'hidden'

I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller ...

jqueryhtmlcss

Add new information after modifying it

Is there a way to retrieve the updated values from the table product and insert them into the purchases table? My code successfully updates the data, but encounters issues when trying to insert into the purchases table. <?php $ID=$_GET["stocksid"]; ...

phphtmlmysql

PHP and special characters from other languages

Struggling with writing non-English characters to a file (.txt) using PHP. Here's the code snippet: $str = "â€êþÿûîœøîô‘ë’ðüïlæ߀¿×÷¡ï"; $str = htmlentities($str, ENT_QUOTES, mb_detect_encoding($str)); $str = htmlspecialc ...

phphtmlfileencodingentities

Tips for creating a rounded bottom for your header

Is it possible to create a rounded header similar to this one? https://i.stack.imgur.com/aYQbA.png ...

htmlcsscss-shapes

A curated list of Laravel form request validation resources

After researching, I couldn't find any information on how to validate collections in the documentation. In .NET Core, I can easily achieve this by creating a Model with data attributes that automatically bind to the front end model, displaying all err ...

c#phphtmllaravellaravel-blade

Using Jquery for Animation: Tips on Revealing Text After Changing Element Color or Styles

Hey everyone, I ran into a bit of trouble while working with jQuery and trying out some animations. My goal was to make a textbox appear and display text when a button is highlighted, similar to a gallery setup. However, I managed to get halfway through th ...

javascriptjqueryhtmlcssanimation

Using an onClick event along with jQuery to change the CSS class style of another div

After searching extensively without success, I decided to register and ask my first question here. Hopefully, someone can provide a solution: My goal is to create a set of five buttons (divs) with onClick events that will show five different divs. I' ...

javascriptjquerycssfunctionclass

What is the best way to limit the dimension of uploaded images to a specific height and width?

function validateImageDimensions(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploadForm + img').remove(); var img = $('<img> ...

jqueryhtmlimagefile-upload

Discover the significance of a data attribute's value for effective comparisons

I have a loop that generates random numbers and positions to create 4 answer choices for users. Now, I am trying to determine the value of the clicked button and compare it to the position of the correct answer. However, whenever I try to do this, it retu ...

javascriptjqueryhtml

Leveraging retrieved API data to generate numerous components

Hey there! I'm new to JavaScript and I'm working on creating a todo list with fake ToDos from jsonplaceholder using Fetch. My goal is to fetch five different ToDos and display them in separate list items within my list. However, I'm encounte ...

javascripthtmljsonplaceholder

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

cssnode.jsdojothemescustomization