맞춤 이미지가있는 부트 스트랩 버튼의 텍스트 및 아이콘 왼쪽 정렬

debugcn 에 게시 Dev

Jaime Alvarez 자리 표시 자 이미지

부트 스트랩 프레임 워크에서 작동하는 버튼의 수평 정렬에 문제가 있습니다. 나는 많은 것을 시도했고 많이 읽었지만 내 솔루션이 작동하지 않습니다. 누군가 나를 도울 수 있습니까? 미리 감사드립니다.

아이디어는 버튼의 텍스트 왼쪽에 정렬하는 것입니다. 첨부 된 이미지는 다음 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>

모하마드 우스만

text-align: leftcss 속성은 inline및 inline-block요소에 영향을 줄 수 있으며 왼쪽 정렬에 사용할 수 있습니다.

편집하다:

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

참고 : 전체 페이지 모드의 데모를 참조하십시오.

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-12

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

맞춤 이미지가있는 부트 스트랩 버튼의 텍스트 및 아이콘 왼쪽 정렬

맞춤 이미지가있는 부트 스트랩 버튼의 텍스트 및 아이콘 왼쪽 정렬

CSS 양쪽 맞춤 버튼 및 아이콘 아래 텍스트

부트 스트랩 4 : 왼쪽의 Flexbox 이미지 및 오른쪽의 텍스트

왼쪽 막대 아이콘과 오른쪽 정렬 아이콘이있는 모바일 NavBar 부트 스트랩

부트 스트랩이있는 가운데 맞춤 버튼

왼쪽 정렬 텍스트 오버레이로 이미지를 가운데에 맞추는 방법

CSS에서 텍스트 왼쪽 정렬 및 이미지 오른쪽 정렬

부트 스트랩 3에서 텍스트 및 아이콘 정렬

부트 스트랩 : 이미지의 텍스트 오버레이가 왼쪽에 붙어 있습니다.

부트 스트랩 레이블의 css 왼쪽 및 위쪽 여백

이미지의 상단, 오른쪽, 하단 및 왼쪽에 텍스트를 정렬 하시겠습니까?

왼쪽 상단 텍스트를 플로팅 된 이미지로 양쪽 맞춤

텍스트는 CSS에서 중앙 또는 여백 왼쪽 및 여백 오른쪽 정렬 버튼이 아닌 중앙 정렬

텍스트를 오른쪽에 맞추고 아이콘 정렬

부트 스트랩 2 열 세로 정렬 + 1 이미지 왼쪽 정렬 + 1 이미지 오른쪽 정렬

텍스트 및 아이콘 CSS 정렬

왼쪽에 부트 스트랩 정렬 버튼

미디어 쿼리, 인라인 블록 및 텍스트 정렬 양쪽 맞춤

왼쪽 정렬 이미지 뒤의 공백과 오른쪽의 텍스트

부트 스트랩은 아이콘을 왼쪽에 정렬하고 텍스트를 상단 막대 중앙에 정렬합니다.

메뉴 아이콘 옆의 오른쪽과 왼쪽에 요소가있는 부트 스트랩 탐색 모음

중앙에 텍스트 및 이미지 (정렬)가있는 부트 스트랩 Div

이미지 왼쪽 아래에 텍스트 정렬

텍스트 영역의 왼쪽 맞춤 텍스트

버튼 태그 안의 텍스트 위에 아이콘 정렬

사이드 바가 왼쪽으로 정렬되지 않음-부트 스트랩

부트 스트랩 navbar를 사용하여 왼쪽 및 오른쪽 너비 레이아웃 수정

아이콘 및 텍스트 버튼

텍스트 정렬 : 양쪽 맞춤이 작동하지 않습니다.

부트 스트랩 사용자 정의 레이아웃 오른쪽 열이 왼쪽 열 아래에 배치됨