居中一個div內的文字

我想知道我怎樣才能將文本居中放在div中。在我的代碼中，這不適用於每個p-tag，導致文本長度不一樣。居中一個div內的文字

HTML： -

<div class="textBlock"> 
    <p>text text text</p> 
</div>

CSS： -

#content .textBlock { 
position: relative; 
text-align: center; 
width: 100%; 
float: left; 
display: block; 
min-height: 160px; 
} 

#content .textBlock p { 
position: absolute; 
top: 50%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 
font-size: 28px; 
font-family: Helvetica, Arial; 
font-weight: 100; 
padding: 0 5%; 
line-height: 34px; 
letter-spacing: 0.1em; 
}

來源

2015-09-09 User1979

不知道其他所有的代碼是，如果你只是對齊文本？

.textBlock { 
 
text-align: center; 
 
min-height: 160px; 
 
} 
 

 
.textBlock p { 
 
font-size: 28px; 
 
font-family: Helvetica, Arial; 
 
line-height: 34px; 
 
letter-spacing: 0.1em; 
 
}

<div class="textBlock"> 
 
    <p>text text text</p> 
 
</div>

來源

2015-09-09 13:15:20 Aaron

這是正確的，這是造成問題的絕對定位。不知道這是否是答案;如果OP確實需要絕對定位呢？ –

請試試這個：

HTML：

<div class="textBlock"> 
    <p>text text text</p> 
</div>

的CSS：

.textBlock { 
text-align: center; 

    background-color:gray; 
} 

.textBlock p { 
font-size: 28px; 
font-family: Helvetica, Arial; 
line-height: 34px; 
letter-spacing: 0.1em; 
    color:white; 
}

DEMO

來源

2015-09-09 13:29:49

居中一個div內的文字

回答

相關問題