Слева выравнивание текста и значка в кнопке начальной загрузки с пользовательским изображением

Question

У меня проблемы с горизонтальным выравниванием в кнопке, работающей с фреймворком бутстрапа. Я пробовал так много вещей, и я много читал, но мое решение не работает. Кто-нибудь может мне помочь? Заранее спасибо.

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

<div class="btn-group btn-group-justified"> 

    <a href="#" class="btn btn-default" id="bCheckIn" value="action01"> 
     <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" /> 
     <span class="hidden-xs hidden-sm">Check in</span> 
    </a> 

    <a href="#" class="btn btn-default" id="bactivities" value="action02"> 
     <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" /> 
     <span class="hidden-xs hidden-sm">Activities</span> 
    </a> 

    <a href="#" class="btn btn-default" id="bBottle" value="action03"> 
     <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" /> 
     <span class="hidden-xs hidden-sm">Bottle</span> 
    </a> 

    <a href="#" class="btn btn-default" id="bComputer" value="action04"> 
     <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" /> 
     <span class="hidden-xs hidden-sm">Computer</span> 
    </a> 

    <a href="#" class="btn btn-default" id="bDiaper" value="action05"> 
     <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" /> 
     <span class="hidden-xs hidden-sm">Diaper</span> 
    </a> 

</div> 

Answer 1

text-align: left CSS свойство может повлиять на inline и inline-block элементы и вы можете использовать его для выравнивания слева.

EDIT:

Если вы используете .btn-group во многих местах на вашем сайте, и вы хотите, чтобы все из них, как выравнивания по левому краю затем применить общие стили влияют на все случаи .btn-group, как показано ниже:

.btn-group .btn-default { 
    text-align: left; 
} 

Однако, если у вас много .btn-group во многих местах, но вы хотите left-align только один из них, то лучше добавить дополнительный пользовательский класс на .btn-group и стилизовать его, как показано ниже.

<div class="btn-group btn-group-justified custom-btn-group"> 
    // content goes here... 
</div> 

и стили следующим образом:

.custom-btn-group .btn-default { 
    // styles goes here... 
} 

Примечание: См демо в режиме Full Page.

.btn-group .btn-default { 
 
    text-align: left; 
 
} 
 

 
.btn-group .btn-default span, 
 
.btn-group .btn-default img { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group btn-group-justified"> 
 
    <a href="#" class="btn btn-default" id="bCheckIn" value="action01"> 
 
     <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35"/> 
 
     <span class="hidden-xs hidden-sm">Check in</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default" id="bactivities" value="action02" > 
 
     <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35"/> 
 
     <span class="hidden-xs hidden-sm">Activities</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default" id="bBottle" value="action03"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35"/> 
 
     <span class="hidden-xs hidden-sm">Bottle</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default" id="bComputer" value="action04"> 
 
     <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35"/> 
 
     <span class="hidden-xs hidden-sm">Computer</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default" id="bDiaper" value="action05"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35"/> 
 
     <span class="hidden-xs hidden-sm">Diaper</span> 
 
    </a> 
 
</div>

Answer 2

Попробуйте следующий код в редакторе, это происходит потому, что использование text-align:center класса .btn по умолчанию, и я перезаписать его text-align:left с новым пользовательским классом .mytest

.mytext{ 
 
    text-align: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group btn-group-justified"> 
 

 
    <a href="#" class="btn btn-default mytext" id="bCheckIn" value="action01"> 
 
     <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Check in</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bactivities" value="action02"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Activities</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bBottle" value="action03"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Bottle</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bComputer" value="action04"> 
 
     <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Computer</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bDiaper" value="action05"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Diafgfgfgper</span> 
 
    </a> 
 

 
</div> 
 

 
<div class="btn-group btn-group-justified"> 
 

 
    <a href="#" class="btn btn-default mytext" id="bCheckIn" value="action01"> 
 
     <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Check in</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bactivities" value="action02"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Activfgfgities</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bBottle" value="action03"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Bofggttle</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bComputer" value="action04"> 
 
     <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Cofgggmputer</span> 
 
    </a> 
 

 
    <a href="#" class="btn btn-default mytext" id="bDiaper" value="action05"> 
 
     <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" /> 
 
     <span class="hidden-xs hidden-sm">Digfgaper</span> 
 
    </a> 
 

 
</div>

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