2015-02-10 18 views
0

我試圖以我的文本爲中心「示例」。我的span標籤中有文本對齊中心,但它不是居中。我只想要「示例」中心而不是其他文本。如何在我的風格中居中文本?

看看我的jsfiddle:http://jsfiddle.net/huskydawgs/dx5fe6x5/

HTML

<p class="textbox"> 
<span style="text-align:center; color:#2251a4; font-weight:bold;letter-spacing: 10px;">EXAMPLE</span><br><br> The powers of the Company shall be exercised by or under the authority of, and the business and affairs of the Company shall be managed under the direction of, one or more managers. The Manager(s) shall be: Jane Doe, John Doe and Yogi Berra.</p> 

CSS

.textbox { 
padding: 8px 12px; 
color: #555555; 
background-color: #F1F1F1; 
border: #e2e3e4 2px solid; 
} 

回答

2

添加display:block;的跨度風格:

.textbox { 
 
    padding: 8px 12px; 
 
color: #555555; 
 
background-color: #F1F1F1; 
 
border: #e2e3e4 2px solid; 
 
} 
 
.title{ 
 
    text-align:center; 
 
    color:#2251a4; 
 
    font-weight:bold; 
 
    letter-spacing: 10px; 
 
    display:block; 
 
     
 
}
<p class="textbox"> 
 
    <span class="title">EXAMPLE</span> 
 
    he powers of the Company shall be exercised by or under the authority of, and the business and affairs of the Company shall be managed under the direction of, one or more managers. The Manager(s) shall be: Jane Doe, John Doe and Yogi Berra. 
 
</p>

我強烈建議你不要使用內聯樣式,只能使用 <br>的地方, 而不是的結構!
JSFiddle Demo

0

span標籤是一個內聯標籤 - 意思是固有的,你不能居中它。

但是,如果你改變它的顯示爲「塊」,你可以調整左,右頁邊距爲自動,你可以 - 像這樣:

.textbox>span{ 
display:block; 
margin-right:auto; 
margin-left:auto; 

}

使用「>」只會直接在.textbox類之後定位「跨度」。

例如:http://jsfiddle.net/dx5fe6x5/5/