큰 글꼴로 멋진 아이콘으로 텍스트를 세로로 가운데 맞추는 방법은 무엇입니까?


231

글꼴이 멋진 아이콘과 텍스트가있는 부트 스트랩 버튼이 있다고 가정 해 보겠습니다.

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

텍스트를 세로 중앙에 표시하려면 어떻게합니까? 텍스트는 이제 아이콘의 아래쪽 가장자리와 정렬됩니다. http://jsfiddle.net/V7DLm/1/

편집 : 나는 가능한이 솔루션 : http://jsfiddle.net/CLdeG/1/을 하지만 약간의 해키 느낌 - 소개 추가 p 태그를 당겨 왼쪽 및 디스플레이 사용 테이블을. 누군가 더 쉬운 방법을 제안 할 수 있습니다.


2
당신은 신입니다. 진지하게, 나는 오늘 이것에 2 시간을 보냈습니다. 귀하의 솔루션은 BY FAR이 가장 깨끗했습니다. 아무 것도 하드 코딩 할 필요가 없습니다.

이 접근 방식이 더 쉽습니다
Raveen Beemsingh

답변:


304

방금 직접해야 했으므로 다른 방법으로해야합니다.

  • 텍스트의 세로 정렬로 재생 하지 마십시오
  • 멋진 글꼴 아이콘의 세로 정렬로 재생
<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;
}

실제 예제는 JsFiddle을 참조하십시오 .


1
예, 이것이 더 나은 솔루션입니다. 감사합니다. jsfiddle.net/paulftw/F3KyK/41
Paul

1
내가 어떻게 할 수 있도록 jsfiddle을 업데이트했습니다. 2x를 사용하는 대신 아이콘의 글꼴 크기를 사용했습니다. jsfiddle.net/3GMjp/1
andxyz

첫 번째 코드에서 <span> 시작 태그는 끝 </ i> 태그와 일치하지 않습니다.
jzacharuk 21

일부 아이콘에서는 작동하지 않습니다. fa-angle-left 예
steakchaser

fontawesome js 파일을 포함하면 모양을 수정할 수도 있습니다. 내 아이콘이 너무 멀리 가기했다, 나는 무슨 일이 일어날 지 확인하기 위해 JS의 포함을 삭제하고 지금은 -.- 바닥에 너무 멀어요
lucidbrot

53

99 %의 텍스트 옆에 아이콘을 사용하여 전 세계적으로 변경했습니다.

.fa-2x {
  vertical-align: middle;
}

필요에 따라 3x, 4x 등을 같은 정의에 추가하십시오.


7
내 생각에 이것은 원래의 질문에 뭔가 빠진 것이 아니라면 가장 간단한 해결책이므로 받아 들일만한 대답이어야합니다. 감사합니다 @rushonerok! 왜 일부 사람들은 사용하지 말라고 확신하지 못합니다 vertical-align: middle;-여기에 뭔가 빠져있을 수 있습니다. 그렇다면 설명하십시오.
Kendall

1
@Kendall 로스 나는 사람들이 사용하지 않는 말할 때 생각하는 vertical-align: middle그 의미, 당신이 사용하는 경우 block요소를 . 당신이 사용하는 경우 inline, inline-block또는 table-cell, 당신이 잘되어야합니다. MDN :vertical-align
rinogo

매력처럼 작동합니다! 감사합니다 : D
Mohammed A. Fadil

37

모든 제안 된 옵션을 고려한 후 가장 깨끗한 솔루션은 줄 높이를 설정하고 모든 것을 수직으로 정렬하는 것 같습니다.

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

2
컨테이너가 50px보다 큰 경우 어떻게됩니까? 그런 다음 작동하지 않습니다 ... 크기가 변하는 콘텐츠가 있으며 내부에 아이콘이 있어야합니다 ... 그에 대한 아이디어가 있습니까?
Slaven Tomac

24

일이 줄 지어 있지 않으면 간단한 line-height: inherit; 정렬 문제가있는 특정 i.fa 요소의 CSS를 통한 하게 트릭을 수행 할 수 있습니다.

CSS 솔루션이 약간 더 높기 때문에 속성 line-height: 1을 요구하지 않고 FontAwesome의 .fa 규칙을 재정의하는 전역 솔루션을 사용할 수도 !important있습니다.

i.fa {
  line-height: inherit;
}

FontAwesome 아이콘을 사용할 수도있는 위치에서 위의 글로벌 솔루션으로 인해 다른 문제가 발생하지 않도록하십시오.


16

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>

깡깡이

https://jsfiddle.net/3bpjvof2/


1
이것은 텍스트 줄뿐만 아니라 div 내에서 아이콘을 세로로 가운데에 맞출 수 있습니다. 잘 작동합니다!
숀 더 빈

@ 누구 든지이 편집을 계속하려고합니다-이것은 일반적으로 답변의 레이아웃 스타일입니다. 나는 그것이 더 읽기 쉽고 이해할 수있게하고 사람들이 링크를 클릭하기 전에 그들이 어디로 가고 있는지 더 잘 알 수 있다고 생각합니다. FA Hosted URL의 경우 일부 사람들은 링크를 강조 표시하여 습관을들이는 경우가 있으므로 전체가 작성됩니다. jsfiddle 링크에는 페이지를 더 잘 나누기위한 헤더가 있습니다. 그렇지 않으면 놓치기가 쉬워지고 답변이 복잡해 보일 수 있습니다.
Hastig Zusammenstellen

11

가장 간단한 방법은 세로 정렬 CSS 속성을 중간으로 설정하는 것입니다

i.fa {
    vertical-align: middle;
}

3
.svg-inline--faFontAwesome 5를 위해
darylknight

@ darylknight, 이것이 무엇을 의미합니까? 어떻게 활성화 / 사용합니까? fa-clock수업 후 내 무언가를 추가 하시겠습니까?
교수 Falken

5

이것은 나를 위해 잘 작동했습니다.

i.fa {
  line-height: 100%;
}

3

아이콘을 다음과 같이 설정하십시오 height: 100%

래퍼로 아무 것도 할 필요가 없습니다 (예 : 버튼).

Font Awesome 5가 필요합니다. 이전 FA 버전에서 작동하는지 확실하지 않습니다.

.wrap svg {
    height: 100%;
}

아이콘은 실제로 svg 그래픽입니다.

데모


2

Bootstrap 4를 사용하는 사람들은 간단합니다.

<span class="align-middle"><i class="fas fa-camera"></i></span>

이것은 수직 정렬로 사용되지 않습니다.이 클래스에서 적용되는 중간은 테이블 만 대상으로합니다.
루카스 만 즈케

1

아이콘의 선 높이를 미세 조정하는 또 다른 옵션은 vertical-align속성 의 백분율을 사용하는 것입니다 . 일반적으로 0 %는 아래쪽이고 100 %는 위쪽이지만 음수 값 또는 100 개 이상을 사용하여 흥미로운 효과를 낼 수 있습니다.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

1

텍스트를 감싸서 별도로 타겟팅 할 수 있습니다. 이제 왼쪽과 왼쪽을 모두 띄우면 선 높이를 사용하여의 세로 간격을 제어 할 수 있습니다. (30px)와 같은 높이로 설정하면 중간 정렬됩니다. 여기를 참조 하십시오 .

새로운 마크 업 :

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

새로운 CSS :

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

4
수직 정렬은 블록 요소에서 아무 작업 수행하지 않으며 인라인 또는 테이블 셀 요소에서만 작동합니다.
cimmanon

나는 line-height = container의 높이를 설정하고 떠 다니는 것들이 작동하고 타이핑이 덜 필요하다는 것을 알았습니다. 다음은 노이즈가 감소 된 업데이트 된 바이올린입니다. jsfiddle.net/F3KyK/7
Paul

vertical-align: middle아이콘과 텍스트로 설정 하는 것이 좋습니다 . 그렇게하면 아이콘 높이에 대해 가정하지 않고 CSS가 줄어 듭니다.
마로스

0

flexbox를 사용할 때 텍스트 옆에 멋진 글꼴 아이콘을 세로로 정렬하는 것은 매우 어려울 수 있습니다. 여백과 패딩을 시도했지만 모든 항목이 이동했습니다. 센터, 시작, 기준선 등과 같은 다른 플렉스 정렬을 시도했지만 아무 소용이 없습니다. 아이콘 만 조정하는 가장 쉽고 깨끗한 방법은 div를 포함하도록 설정하는 것이 었습니다 position: relative; top: XX;.이 작업을 완벽하게 수행했습니다.


0

글쎄,이 질문은 몇 년 전에 요청되었습니다. 기술이 많이 바뀌었고 브라우저 호환성이 훨씬 뛰어나다 고 생각합니다. 수직 정렬을 사용할 수는 있지만 일부는 덜 확장 가능하고 재사용 성이 떨어지는 것을 고려할 것입니다. flexbox 접근 방식을 권장합니다 .

다음은 원래 포스터가 사용되었지만 flexbox와 동일한 예입니다. 단일 요소의 스타일을 지정합니다. 어떤 이유로 든 버튼 크기가 변경되면 계속 수직 및 수평 중앙에있게됩니다.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

예 : JsFiddle


0

vertical-align아이콘 요소의 속성을 간단히 정의 하십시오.

div .icon {
   vertical-align: middle;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.