CSS 모양 안에 아이콘을 센터링하는 방법은 무엇입니까?

뷰포트의 하단에 고정시키고 자하는 CSS 테두리를 사용하여 삼각형 모양을 만들었고 또한 CSS 삼각형 모양 안에 가운데에 놓기를 원하는 부트 스트랩 글리 피언을 가지고 있지만 어떻게해야하는지 알 수 없습니다 그것. CSS 모양 안에 아이콘을 센터링하는 방법은 무엇입니까?

.to-top { 
 
    border-right: 60px solid transparent; 
 
    border-left: 60px solid transparent; 
 
    border-bottom: 60px solid black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    right: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.to-top span { 
 
    font-size: 2em; 
 
    transform: translateX(-50%); 
 
}

<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

당신이 날 도와 주시겠습니까 :

여기 내 코드입니다.

출처

2016-10-14 startToday

.to-top { 
 
    border-right: 60px solid transparent; 
 
    border-left: 60px solid transparent; 
 
    border-bottom: 60px solid black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    right: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
.to-top span { 
 
    height: 2em; 
 
    font-size: 2em; 
 
    transform: translateX(-50%); 
 
    position: fixed; 
 
} 
 

 
.to-top span::before { 
 
    position: absolute; 
 
    bottom: .25em; 
 
    left: -.5em 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<body> 
 
<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

출처

2016-10-14 13:53:12

글리프콘 모양이 컨테이너 상자의 전체 너비에 맞지 않는 문제가 있습니다. 그것은 실제로 정렬에서 그것을 내고있는 오른쪽에 더 3px를 얻었다.

나는 그들이 장기적으로 혼란 스러울 또한 이상한 방법으로 위치에 영향을 미칠 수 있기 때문에보다 쉽게 작업 및 transforms 점점 translates을 할 수 있도록 코드를 약간 변경되었습니다.

.to-top { 
 
    position: fixed; 
 
    width: 120px; 
 
    height: 120px; 
 
    bottom: -60px; 
 
    background: black; 
 
    left: calc(50% - 60px); 
 
    transform: rotate(45deg); 
 
} 
 
.to-top span { 
 
    font-size: 2em; 
 
    transform: rotate(-45deg); 
 
    left:3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

출처

2016-10-14 13:48:03 Stewartside

CSS 모양 안에 아이콘을 센터링하는 방법은 무엇입니까?

답변

관련 문제