кнопка с изображением слева и текст выравнивается по центру

Question

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

я попытался с пролетом, но без успеха

<a href=#><button class="lightgray-btn rightbuttons"><span class="demoimage"><img class="btnimg" src="..." alt="" /></span><span class="demotext">"some text</span></button></a> 

я также хочу, чтобы избежать фонового изображения: URL, потому что в мобильном телефоне я боюсь, что текст будет на изображение

спасибо

Answer 1

Это будет работать на вас.

button { 
 
    position: relative; 
 
    padding: 15px 40px; 
 
    text-align: center; 
 
} 
 
.btnimg { 
 
    position: absolute; 
 
    left: 6px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<button class="lightgray-btn rightbuttons"> 
 
    <img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" /> 
 
    some text 
 
    </button>

Answer 2

Вы не должны использовать кнопку для простой ссылки. Вместо этого используйте ссылку и настройте ее. Вы можете сделать это, как это, например:

.btn { 
 
    position: relative; 
 
    display: block; 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: 6px; 
 
    text-decoration: none; 
 
    background-color: #af0c0c; 
 
    color: #fff; 
 
} 
 
.btn img { 
 
    float: left; 
 
} 
 
.btn span { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<a href="" class="btn"> 
 
\t <img src="//lorempicsum.com/futurama/50/50/2" alt="" /> 
 
    <span>Lorem ipsum</span> 
 
</a>

Answer 3

Вот более простой способ сделать это:

.myawesomebutton img 
{ 
float:left; 
} 
.myawesomebutton span 
{ 
position:absolute; 
top:50%; 
left:50%; 
-webkit-transform:translate(-50%, -50%); 
transform:translate(-50%, -50%); 
} 

<a href="#" class="myawesomebutton"> 
    <img src="myawesomeimages/myawesomeimage.png"/> 
    <span>My awesome button</span> 
</a> 

Answer 4

Вы можете задать минимальную ширину для вашего фона изображения и применить так же, как заполнение в левом и правом тексте. Таким образом, ваш текст не будет перекрывать фоновое изображение.