定位一個離開一邊的元素？

Question

我正在嘗試使「FlowerPot」文本居中對齊，但它不起作用。我不知道爲什麼。也許這是令人發瘋的<code>元素，但我不認爲這會有所作爲。這是我的代碼：

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic); 
 
body { 
 
    width: 100%; 
 
    background-color: #B10DC9; 
 
    overflow-x: scroll; 
 
    right: 0; 
 
} 
 
img { 
 
    padding-left: 10px; 
 
    width: 50px; 
 
    z-index: 0; 
 
    float: left; 
 
} 
 
code { 
 
    position: absolute; 
 
    top: 0; 
 
    color: white; 
 
    z-index: 0; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
#introdiv { 
 
    background-color: blue; 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 0px; 
 
    position: fixed; 
 
    z-index: 0; 
 
}

<div id="introdiv"> 
 
    <img src="http://cakestyle.tv/wp-content/uploads/2013/03/Flower-Pot-no-background-smaller.png"></img> 
 
    <code style="font-family:Lobster Two; font-size:60px;">FlowerPot</code> 
 
</div>

請幫忙。我不知道我做錯了什麼。我需要添加或刪除一些東西嗎？我需要改變什麼嗎？

任何幫助，將不勝感激。謝謝！

Answer 1

添加left:0到code

code { 
    position: absolute; 
    top: 0; 
    color: white; 
    z-index: 0; 
    float: left; 
    width: 100%; 
    left: 0; 
} 

Answer 2

修改選擇code風格，並添加left: 0;風格。你可以得到你的結果。