Font Awesome 아이콘을 가로로 가운데 맞추는 방법은 무엇입니까?

Font Awesome 아이콘을 가로로 가운데 맞추는 방법은 무엇입니까?

---

Font Awesome 아이콘 이있는 테이블이 있고 텍스트를 왼쪽과 가운데 아이콘으로 정렬하고 싶습니다. 센터링을 시도 <i>했지만 작동하지 않습니다.

HTML :

<td><i class="icon-ok"></i></td>

CSS :

td, th {
    text-align: left;
}
td i {
    text-align:center;
}

jsFiddle

나는 또한 설정하려고 text-align:center !important;했지만 작동하지 않습니다. 내가 뭘 잘못 했어?

---

멋진 글꼴 스타일의 나만의 풍미 추가

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

당신과 함께

td i {
    text-align:center;
}

아이콘을 중앙에 배치해야합니다.

---

text-align: center;아이콘 ( <td>) 의 블록 컨테이너에서 사용 -텍스트 정렬은 인라인 요소에 적용되지 않고 블록 컨테이너에만 적용됩니다.

td {
    text-align: center;
}

http://jsfiddle.net/kB6Ju/2/

---

아이콘이 포함 된 셀에 클래스 제공

<td class="icon"><i class="icon-ok"></i></td>

그리고

.icon{
    text-align: center;
}

---

나는 이것으로 내 문제를 해결했다.

<div class="d-flex justify-content-center"></div>

글꼴 멋진 아이콘과 함께 부트 스트랩을 사용하는 메신저.

더 많은 액세스를 알고 싶다면 아래 링크를 참조하십시오 : https://getbootstrap.com/docs/4.0/utilities/flex/

---

아이콘이 포함 된 셀에 클래스를 추가하고 싶지 않으니 어떻습니까?

아이콘 td이 아닌 각 내용을 다음으로 래핑합니다 span.

<td><span>consectetur</span></td>
<td><span>adipiscing</span></td>
<td><span>elit</span></td>

이 CSS를 사용하십시오.

td {
    text-align: center;
}
td span {
    text-align: left;
    display: block;
}

나는 일반적 으로이 상황에서 답변을 게시하지 않지만 댓글이 너무 길어 보입니다.

---

OP 속성 선택기를 사용하여 원하는 결과를 얻을 수 있습니다. 추가 한 추가 코드는 다음과 같습니다.

tr td i[class*="icon"] {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
}

다음은 업데이트 된 jsFiddle http://jsfiddle.net/kB6Ju/5/입니다.

---

아이콘이 아이콘 스택에있는 경우 다음 코드를 사용할 수 있습니다.

.icon-stack{ margin: auto; display: block; } 

참조 URL : https://stackoverflow.com/questions/19162889/how-to-center-font-awesome-icons-horizontally