Текст нецентрированный внутри кнопки

Question

У меня есть две кнопки, один из текста кнопки не находится в центре кнопки.

.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> 
 
      

Текст Скачать CSV не центрирован на кнопку.
Любая помощь будет замечательной.

Thank you.

Answer 1

Он по центру, только ваши кнопки ширина ограничена, а текст перелива на правой стороне, изменение:

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

в

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

I были выставиться width к 125px, если вы хотите иметь кнопки одинаковой ширины, в противном случае просто удалите тег 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

Текст не центрирован, потому что вы задаете явную ширину своей кнопке, которая слишком мала для текста.

Удалить width: 100px !important из вашего .mail_download_csv_btn, и текст получит пространство, необходимое для центровки.

Если вы хотите, чтобы все кнопки имеют одинаковый размер, вы не должны явно задать ширину, как вы не можете знать, сколько места широкая кнопка будет принимать в разных браузерах. Вместо этого попробуйте что-то вроде setting all buttons to the width of the widest button.