Как разместить текст внутри кнопки?

Я просто использую float: left на значке прямо сейчас, потому что я борюсь с позиционированием текста в моей кнопке, так что значок находится в «середине» (20% слева), а текст находится посередине (80% права).Как разместить текст внутри кнопки?

Как это:

********************************** 
* Icon  Text will be here * 
*        * 
**********************************

Вот как я кнопка настройки:

<button class="button button-block"> 
    <i class="ion-plus-round"></i><span>Add to Favorites</span> 
</button>

источник

2015-12-12 user1354934

Обеспечить демонстрацию таких как скрипка, попробуйте дисплей: встроенный блок и вертикальной Align: середина без поплавка –

http://codepen.io/anon/pen/gPbQNZ Что о что-то вроде этого? Все будет в порядке? – user1354934

Try CSS flexbox:

#container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
#container > * { 
 
    margin-right: 5px; 
 
}

<button> 
 
    <span id="container"> 
 
     <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt=""> 
 
     <span>Add to Favorites</span> 
 
    </span> 
 
</button>

Я использовал span, чтобы обернуть содержимое, потому что some browsers don't accept button elements as flex containers.

Browser Поддержка

Flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE 10, требуют vendor prefixes. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в this answer.

источник

2015-12-12 02:08:31

спасибо Майкл. Это действительно здорово, и я собираюсь поиграть с этим. Я думаю, что это было бы лучше для меня. благодаря – user1354934

Вот пример использования шрифта Awesome.

Добавить левый край к span для управления расстоянием между двумя встроенными элементами (i и span).

Если вы укажете ширину кнопки, вы можете установить ширину для двух дочерних элементов по мере необходимости.

button span { 
 
    margin-left: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<button class="button button-block"> 
 
    <i class="fa fa-plus-circle"></i><span>Add to Favorites</span> 
 
</button>

источник

2015-12-12 02:12:04

Как о чем-то вроде этого?

angular.module('ionicApp', ['ionic']) 
 

 
.controller('MyCtrl', function($scope) { 
 

 
});

.button-block { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.button-block i { 
 
    margin-right: 15px; 
 
}

<html ng-app="ionicApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 

 
    <title>Ionic Pull to Refresh</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 

 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 

 

 
    <ion-content> 
 
    
 
    <div class="tabs" style="height:auto;"> 
 
     <div class="row"> 
 
     <div class="col" style="padding: 0"> 
 
      <button class="button button-block button-positive"> 
 
      <i class="ion-plus-round"></i><span>Add to Favorites</span> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </ion-content> 
 

 
</body> 
 

 
</html>

источник

2015-12-12 02:24:50

Как разместить текст внутри кнопки?

ответ

Смежные вопросы