글꼴이 멋진 아이콘과 텍스트가있는 부트 스트랩 버튼이 있다고 가정 해 보겠습니다.
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>텍스트를 세로 중앙에 표시하려면 어떻게합니까? 텍스트는 이제 아이콘의 아래쪽 가장자리와 정렬됩니다. http://jsfiddle.net/V7DLm/1/
편집 :
나는 가능한이 솔루션 : http://jsfiddle.net/CLdeG/1/을 하지만 약간의 해키 느낌 – 소개 추가 p 태그를 당겨 왼쪽 및 디스플레이 사용 테이블을. 누군가 더 쉬운 방법을 제안 할 수 있습니다.
답변
방금 직접해야 했으므로 다른 방법으로해야합니다.
- 텍스트의 세로 정렬로 재생 하지 마십시오
- 멋진 글꼴 아이콘의 세로 정렬로 재생
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>물론 인라인 스타일을 사용하고 자신의 CSS 클래스로 대상을 지정할 수 없습니다. 그러나 이것은 복사 붙여 넣기 방식으로 작동합니다.
여기를 참조하십시오 :
버튼의 텍스트와 아이콘의 수직 정렬
그러나 그것이 나에게 달려 있다면 icon-2x를 사용하지 않을 것입니다. 다음과 같이 글꼴 크기를 직접 지정하십시오.
<div class='my-fancy-container'>
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
</div>.my-icon {
vertical-align: middle;
font-size: 40px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}답변
99 %의 텍스트 옆에 아이콘을 사용하여 전 세계적으로 변경했습니다.
.fa-2x {
vertical-align: middle;
}필요에 따라 3x, 4x 등을 같은 정의에 추가하십시오.
답변
모든 제안 된 옵션을 고려한 후 가장 깨끗한 솔루션은 줄 높이를 설정하고 모든 것을 수직으로 정렬하는 것 같습니다.
Jsfiddle 데모 보기
CSS :
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}답변
일이 줄 지어 있지 않으면 간단한 line-height: inherit; 정렬 문제가있는 특정 i.fa 요소의 CSS를 통한 하게 트릭을 수행 할 수 있습니다.
CSS 솔루션이 약간 더 높기 때문에 속성 line-height: 1을 요구하지 않고 FontAwesome의 .fa 규칙을 재정의하는 전역 솔루션을 사용할 수도 !important있습니다.
i.fa {
line-height: inherit;
}FontAwesome 아이콘을 사용할 수도있는 위치에서 위의 글로벌 솔루션으로 인해 다른 문제가 발생하지 않도록하십시오.
답변
flexbox 옵션-멋진 4.7 이하 글꼴
FA 4.x 호스팅 URL- https : //stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
line-height: 40px; /* vertically size by height, line-height or padding */
padding: 0px 10px; /* horizontal with padding-l/r */
border: 1px solid #ccc;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class='fa fa-2x fa-camera'></i>
hello world
</div>깡깡이
http://jsfiddle.net/Hastig/V7DLm/180/
flex와 font awesome 5 사용하기
FA 5.x 호스팅 URL- https : //use.fontawesome.com/releases/v5.0.8/js/all.js
div {
display: inline-flex; /* make element size relative to content */
align-items: center; /* vertical alignment of items */
padding: 3px 10px; /* horizontal vertical position with padding */
border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
<i class='fas fa-camera'></i>
hello world
</div>
<div class="icon-clock">
<i class='fas fa-clock'></i>
hello world
</div>깡깡이
답변
가장 간단한 방법은 세로 정렬 CSS 속성을 중간으로 설정하는 것입니다
i.fa {
vertical-align: middle;
}답변
이것은 나를 위해 잘 작동했습니다.
i.fa {
line-height: 100%;
}