2017-06-04 158 views
0

我試圖在CSS中使用文本對齊,但它不起作用。 這裏是CSS,我也有所有的身體設置爲中心,這是否與某事有關? 這裏是我的CSS:CSS文本對齊不起作用

#Swell { 
 
\t text-align: left; 
 
}

這裏是我的HTML:

<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>

而且我的身體CSS的text-align:

body { 
 
font-family: sans-serif; 
 
text-align: center; 
 
background-color: rgb(128, 212, 255); 
 
}

劑量的text-align:中心有錯誤做,如果這是真的,那麼我該如何改寫/修正這個錯誤

回答

0

HTML

<div id="parentdiv"> 
    <a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a> 
</div> 

CSS

body { 
font-family: sans-serif; 
text-align: center; 
background-color: rgb(128, 212, 255); 
} 

#parentdiv { 
    text-align: left; 
} 

示例

<html> 
 
<style> 
 
body { 
 
font-family: sans-serif; 
 
text-align: center; 
 
background-color: rgb(128, 212, 255); 
 
} 
 
    
 
#parentdiv { 
 
text-align: left; 
 
} 
 
</style> 
 
<div id="parentdiv"> 
 
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a> 
 
</div> 
 
</html>

2

的錨元件<a>是每默認內嵌元素。這意味着它本身沒有寬度或高度,而是與內容一樣大。

在您的示例中,text-align屬性起作用。只是文本對齊它的容器。在這種情況下,它與內容一樣大。因此你不會看到任何區別。

嘗試設置錨元素的顯示屬性以阻止並查看會發生什麼。

a{ 
 
display:block; 
 
text-align:right; 
 
}
<a>Blocking beautiful</a>

編輯:更符合你的例子:

body{ 
 
text-align:center; 
 
} 
 

 
a{ 
 
display:block; 
 
text-align:left; 
 
}
<body> 
 
<a>Still beautiful</a> 
 
<span>centered</span> 
 
</body>

+0

請考慮標誌着答案,如果它幫助你@klaartje – phil

+0

對不起,我的意思@保持冷靜,熱愛學校 – phil