CSS 모양 위에 텍스트를 가운데 정렬하는 방법은 무엇입니까?

탐색을 위해 오버레이 텍스트가있는 이미지가 아닌 CSS 모양을 사용하기로했습니다. 그러나 모든 브라우저에서 텍스트가 오른쪽으로 정렬되지 않은 것처럼 보입니다.CSS 모양 위에 텍스트를 가운데 정렬하는 방법은 무엇입니까?

Preview on jsFiddle

HTML 코드 :

<nav id="globalNav"> 
    <ul> 
     <li> 
      <div class="stars"></div> 
      <a id="navHome">home</a> 
     </li> 
     <li> 
      <div class="stars"></div> 
      <a id="navWork">work</a> 
     </li> 
     <li> 
      <div class="stars"></div> 
      <a id="navAbout">about</a> 
     </li> 
    </ul> 
</nav>

CSS 코드 :

#globalNav { 
    position: fixed; 
    z-index: 1; 
    width: 100%; 
    height: 100px; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    background-color: #1b2326; 
    color: #2A363B; 
} 

    #globalNav ul { 
     margin: 1.25em auto; 
     padding: 0; 
     position: relative; 
     -webkit-padding-start: 0; 
      -moz-padding-start: 0; 
     text-align: center; 
    } 

     #globalNav li { 
      padding: 0 3.5em; 
      display: inline-block; 
     } 

    #globalNav a { 
     position: absolute; 
     top: 1.3em; 
     padding: 0 0.25em; 
     -moz-padding-start: 0; 
     font-size: 1em; 
     text-transform: uppercase; 
     color: #FECEA8; 
    } 

     #globalNav a:hover { 
      position: absolute; 
      top: 1.3em; 
      padding: 0 0.25em; 
      -moz-padding-start: 0; 
      font-size: 1em; 
      text-transform: uppercase; 
      color: #ED6161; 
      -webkit-transition: .3s ease-in; 
       -moz-transition: .3s ease-in; 
       -ms-transition: .3s ease-in; 
       -o-transition: .3s ease-in; 
        transition: .3s ease-in; 
     } 

/* dodecagram stars */ 
.stars { 
    background: #2A363B; 
    width: 60px; 
    height: 60px; 
    position: relative; 
} 

    .stars:before, .stars:after { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 60px; 
     width: 60px; 
     background: #2A363B; 
    } 

    .stars:before { 
     -webkit-transform: rotate(30deg); 
      -moz-transform: rotate(30deg); 
      -ms-transform: rotate(30deg); 
      -o-transform: rotate(30deg); 
    } 

    .stars:after { 
     -webkit-transform: rotate(60deg); 
      -moz-transform: rotate(60deg); 
      -ms-transform: rotate(60deg); 
      -o-transform: rotate(60deg); 
    }

가 이미 포럼 (즉, Center text with background CSS “shape”), 그러나이 솔루션은 나를 위해 작동하지 않았다을 검색.

출처

2013-03-30 Anonymous

는 모양 내부에 <a> 태그에 다음과 같은 CSS를 추가하고 그들은 텍스트 정렬을 추가 모양 :

position: absolute; 
top: 1.3em; 
-moz-padding-start: 0; 
font-size: 1em; 
text-transform: uppercase;  /* Also, note that I removed the padding */ 
color: #FECEA8; 
display: block; 
width: 60px; 
word-wrap: break-word; 
}

http://jsfiddle.net/TVkNK/7/

출처

2013-03-30 02:26:27

링크 텍스트가 4 - 5 자이기 때문에 중심에있는 것처럼 보입니다. 홈을 StackOverflow로 변경하고 어떤 일이 발생하는지 확인하십시오. – nunzabar

@nunzabar 가장 최근의 편집은'stackoverflow'와 작동합니다 : –

"Stack"다음에 공백을 넣고 감싸는 경우에만 감싸줍니다! 나는 더 나은 해결책이 없습니다. :-) – nunzabar

의 중앙에 정렬됩니다 : CSS의 중심까지 그것을했다 나를 위해. 또한 수직 중심 맞춤을 위해 적절한 패딩을 추가하기 위해 padding-top을 사용했습니다.

출처

2016-11-04 04:40:24 Lexo

CSS 모양 위에 텍스트를 가운데 정렬하는 방법은 무엇입니까?

답변

관련 문제