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

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

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

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

텍스트가 세로로 가운데에 표시되도록 하려면 어떻게 해야 합니까?이제 텍스트가 아이콘의 아래쪽 가장자리에 정렬됩니다. http://jsfiddle.net/V7DLm/1/

그냥 내가 직접 해야 했어요. 반대로 해야 해요.

• 텍스트의 세로 방향을 가지고 놀지 않습니다.
• 글꼴 고정 아이콘의 세로 정렬로 재생

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

물론 인라인 스타일을 사용할 수도 없고 자신의 CSS 클래스로 공략할 수도 없습니다.하지만 이것은 복사 페이스트 방식으로 작동합니다.

참조: 텍스트 및 아이콘의 세로 정렬 단추

하지만 제 마음대로라면 아이콘-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 을 참조하시기 바랍니다.

텍스트 옆에 아이콘을 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의 특정성이 약간 높기 때문에 다음을 지정하는 FontAwesome의 .fa 규칙을 무시하는 글로벌 솔루션을 사용할 수도 있습니다.line-height: 1필요없이!important다음 항목에 적용됩니다.

i.fa {
  line-height: inherit;
}

위의 글로벌 솔루션이 FontA의 멋진 아이콘을 사용할 수 있는 곳에서 다른 문제를 일으키지 않도록 하십시오.

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/

---

플렉스와 폰트를 사용하면 멋진 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/

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

i.fa {
    vertical-align: middle;
}

이것은 저에게 잘 통했습니다.

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

아이콘을 다음과 같이 설정해 봅니다.height: 100%

포장지를 가지고 아무것도 할 필요가 없습니다.

이렇게 하려면 글꼴 어썸 5가 필요합니다.이전 FA 버전에서도 작동하는지 확실하지 않습니다.

.wrap svg {
    height: 100%;
}

는 이 는 과 과 는 이 svg

데모

부트스트랩 4를 사용하는 사람들은 간단합니다.

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

선하는 또 은 의 하는 은 의 을 하는 입니다 를 입니다 하는 을 의 의 은 vertical-align◦ 는 바닥,하거나 백 개 효과를 낼 수 있습니다.보통 0%는 바닥, 100%는 위쪽에 있지만 음의 값을 사용하거나 백 개 이상을 사용하여 흥미로운 효과를 낼 수 있습니다.

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

이 질문은 몇 년 전에 한 질문입니다.저는 기술이 상당히 변화했고 브라우저 호환성도 훨씬 좋아졌다고 생각합니다.수직 정렬을 사용할 수도 있지만 확장성이 떨어지고 재사용성이 떨어지는 부분도 있다고 생각합니다.플렉스박스 방식을 추천합니다.

기존 포스터가 플렉스박스에 사용되었던 것과 동일한 예시입니다.단일 요소로 스타일링 해줍니다.어떤 이유로든 버튼 크기가 변경되면, 버튼은 계속 수직과 수평으로 중앙에 놓이게 됩니다.

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

예: 제이에스피들

텍스트를 a로 포장해서 따로 대상을 지정할 수 있도록 하겠습니다.이제 왼쪽과 양쪽을 띄우면 선 높이를 사용하여 의 세로 간격을 조절할 수 있습니다. (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;
}

플렉스박스를 사용할 경우 텍스트 옆에 멋진 글꼴 아이콘을 세로로 정렬하는 것이 매우 어려울 수 있습니다.마진과 패딩을 시도해 보았지만 모든 아이템이 움직였습니다.센터, 스타트, 베이스라인 등 다양한 유연성 정렬을 시도했지만 소용이 없었습니다.하는 div를만장고를은한록다는는를다는t록eo만으로 설정하는 것이었습니다.position: relative; top: XX;이것은 완벽하게 일을 해냈습니다.

합니다를 합니다.vertical-align아이콘 요소의 속성:

div .icon {
   vertical-align: middle;
}

저는 단순히 요소에 테두리를 두르게 하고, 내용을 맞추는 것만으로도 완벽하게 해결할 수 있습니다.

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}

언급URL : https://stackoverflow.com/questions/17309928/how-to-center-text-vertically-with-a-large-font-awesome-icon