CSS를 사용하여 div 요소 안에 텍스트를 가운데 맞추는 방법

Question

div 요소 (빨간색 상자) 안에 세로 및 가로 모두 단락 요소의 가운데에 텍스트를 배치하고 싶습니다. 세로 정렬을 사용하려고합니다. 중간이지만 작동하지 않습니다. 어떤 도움을 주시면 감사하겠습니다. 고마워요.

http://jsfiddle.net/9NLtB/

.transparent-btn { 
    font:bold 20px"Arial Black", Gadget, sans-serif; 
    font-style:normal; 
    color:#ffd324; 
    background-color: rgba(255, 0, 0, .90); 
    border:2px solid #000; 
    text-shadow:0px -1px 1px #222222; 
    box-shadow:0px 0px 12px #2e2300; 
    -moz-box-shadow:0px 0px 12px #2e2300; 
    -webkit-box-shadow:0px 0px 12px #2e2300; 
    border-radius:15px 15px 15px 15px; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    width:100px; 
    height:100px; 
    margin:5px; 
    display:inline-block; 
    position:relative; 
} 

.transparent-btn:active { 
    cursor:pointer; 
    position:relative; 
    top:2px; 
} 

#wrapper { 
    text-align:center; 
} 

p { 
    display:inline-block; 
    vertical-align:middle; 
} 

Answer 1

display:table-cell 다음 텍스트 요소에 normal로 지정, 당신의 DIV에 line-height 속성을 추가했다.

.transparent-btn { 
    line-height: 100px; 
    text-align: center; 
} 


span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal; 
} 

그리고 네, 이것은 여러 줄의 텍스트와 함께 작동 :

데모 : http://jsfiddle.net/9NLtB/12/

Answer 2

당신은 line-height 사용할 수 있습니다

p { 
     display:inline-block; 
     vertical-align:middle; 
     line-height: 55px; 
} 

fiddle

Answer 3

이 코드

.transparent-btn { 
    font:bold 20px"Arial Black", Gadget, sans-serif; 
    font-style:normal; 
    color:#ffd324; 
    background-color: rgba(255, 0, 0, .90); 
    border:2px solid #000; 
    text-shadow:0px -1px 1px #222222; 
    box-shadow:0px 0px 12px #2e2300; 
    -moz-box-shadow:0px 0px 12px #2e2300; 
    -webkit-box-shadow:0px 0px 12px #2e2300; 
    border-radius:15px 15px 15px 15px; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    width:100px; 
    height:100px; 
    margin:5px; 
    display:inline-block; 
    position:relative; 
    vertical-align:top; 
} 

p { 
     display:inline-block; 
     vertical-align:middle; 
    line-height: 50px; 
} 

시도 DEMO

Answer 4

당신이 뭔가를 할 수 있습니다 :

jsFiddle example

사용 display:inline-table; 및 vertical-align:top;.transparent-btn에. 내가 정확히 어떻게 작동하는지 이해하기 위해 p 태그를 제거했습니다 line-height:100px; 추가

p { 
    display:table-cell; 
    vertical-align:middle; 
} 

Answer 5

: 그런 다음에 페이지의 CSS를 설정합니다.

는 바이올린 : http://jsfiddle.net/9NLtB/8/

또한 필요 플로트는 문제 해결

display:inline-block; 
float:left; 

Answer 6

링크를 참조 div의 정렬 왼쪽 Text-Aligned

---

이 단지 2를 추가 가장 효율적인 mehtod입니다 CSS 규칙

,451,515,

vertical-align:middle; 
line-height:100px; 

불필요한 제거 <p> 태그

---

당신은 수평과 수직 모두를 정렬 할 수 있습니다! 컨테이너의 높이와 같은 선 높이를 추가하고 세로 정렬 중간을 적용하십시오 (여기서 컨테이너는 100px 높이이므로 100px line_height simple!

---

CSS

---

.transparent-btn { 
    font:bold 20px"Arial Black", Gadget, sans-serif; 
    font-style:normal; 
    color:#ffd324; 
    background-color: rgba(255, 0, 0, .90); 
    border:2px solid #000; 
    text-shadow:0px -1px 1px #222222; 
    box-shadow:0px 0px 12px #2e2300; 
    -moz-box-shadow:0px 0px 12px #2e2300; 
    -webkit-box-shadow:0px 0px 12px #2e2300; 
    border-radius:15px 15px 15px 15px; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    width:100px; 
    height:100px; 
    margin:5px; 
    display:inline-block; 
    position:relative; 
    vertical-align:middle; 
    line-height:100px; 
} 
.transparent-btn:active { 
    cursor:pointer; 
    position:relative; 
    top:2px; 
} 
#wrapper { 
    text-align:center; 
} 

HTML

---

<div id="wrapper"> 
<div class="transparent-btn">text</div> 
<div class="transparent-btn">text</div> 
<div class="transparent-btn">text</div> 
<div class="transparent-btn">text</div> 
</div> 

Answer 7

p { 
    line-height: 100px; 
    margin: 0; 
} 

Answer 8

하거나 COD를 사용

전자 http://jsfiddle.net/9NLtB/11/ 나는 span 및 display:table 및

Answer 9

나는 텍스트와 버튼이 빈들에 비해 아래로 밀어 귀하의 예제에서 몰래하고 있습니다. 나는 이것이 원하는 행동이 아니라고 가정하고 있습니다.

당신은이 display: table-cell;로 설정되어 일단 지금 margin: 5px; 이제 더 이상 .transparent-btn에서 작동 .transparent-btn

#wrapper { 
    display:table; 
    margin: auto; 
    border-collapse: separate; 
    border-spacing: 5px; 
} 

.transparent-btn { 
    display: table-cell; 
    vertical-align: middle; 
    font:bold 20px"Arial Black", Gadget, sans-serif; 
    font-style:normal; 
    color:#ffd324; 
    background-color: rgba(255, 0, 0, .90); 
    border:2px solid #000; 
    text-shadow:0px -1px 1px #222222; 
    -moz-box-shadow:0px 0px 12px #2e2300; 
    -webkit-box-shadow:0px 0px 12px #2e2300; 
    box-shadow:0px 0px 12px #2e2300; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    border-radius:15px 15px 15px 15px; 
    width:100px; 
    height:100px; 
    text-align: center; 
} 

p { 

} 

에 #wrapper 및 display: table-cell;에 display: table;를 사용할 수 있습니다. 그래서 대신 border-collapse: separate;과 border-spacing: 5px;을 사용합니다.

또한 접두사가없는 버전 border-radius 및 box-shadow이 붙어야합니다.

다음은 : JsFiddle