HTML5在元素中定位文本時遇到的問題

我在按鈕中的文本遇到問題。無論何時我嘗試將填充應用於按鈕的頂部或底部以使文本處於中心位置，則只需移動整個按鈕即可。我懷疑這與我對定位和顯示缺乏瞭解有很大關係。HTML5在元素中定位文本時遇到的問題

<!DOCTYPE html> 
<html> 
<head> 
    <title>WhiteGrid</title> 
    <link type="text.css" rel="stylesheet" href= "stylesheet.css"/> 
</head> 
<body> 
    <div> 
     <div id="header"><img src="title.png"></div> 
     <div id="navbar"> 
      <div class="button"><p>Home</p></div> 
      <div class="button"><p>Gallery</p></div> 
      <div class="button"><p>About</p></div> 
      <div class="button"><p>Settings</p></div> 

     </div> 
     <div id="body"></div> 
     <div id="footer"><p>Copyright&copy 2015 Hayden Shaw. All rights reserved.</p></div> 
    </div> 
</body> 
</html>

CSS：

body { 
    background-color: #C6C1C9; 
} 

#header { 
    display: block; 
    background-color: #856799; 
    height: 60px; 
    width: 100%; 
    box-shadow: 0px 1px rgba(0,0,0,0.2); 
} 
#header > img { 
    display: block; 
    margin: auto; 
} 

#navbar { 
    display: block; 
    background-color: rgba(73,71,74,0.7); 
    height: 40px; 
    width: 100%; 
    box-shadow: 0px 1px rgba(0,0,0,0.2); 
} 
#body { 
    display: block; 
    width: 100%; 
    min-height:500px; 
} 
#footer { 
    padding-top:24px; 
    display: block; 
    background-color: #7D7285; 
    width: 100%; 
    height: 60px; 
    box-shadow: 0px 1px rgba(0,0,0,0.2); 
} 
#footer > p { 
    position: relative; 
    text-shadow: 0px -1px rgba(0,0,0,0.2); 
    color: #A3A3A3; 
    font-family: Verdana; 
    font-size: 10px; 
    text-align: center; 

} 
.button{ 
    margin:0px; 
    text-shadow: 0px -1px rgba(0,0,0,0.2); 
    font-family: Verdana; 
    text-align: center; 
    color: white; 
    display: inline-block; 
    height: 40px; 
    width: 80px; 
    background-color: rgba(73,71,74,0); 
} 
.button:hover{ 
    background-color: #353336; 
    color: #856799; 
}

在此先感謝。

來源

2015-11-18 Hayden Shaw

不要將填充應用於按鈕，而是應用於您有文本的段落。如果在佈置文本時遇到問題，我會建議使用文本的圖像，這樣會更容易。

看起來你正在嘗試創建一個菜單欄。我不會用div來做。使用表格或列表要容易得多。

<table> 
     <tr> 
    <td>Home</td> 
    </tr> 
     </table> 

    <ul> 
    <li>Home</li> 
</ul>

這將更容易風格。

來源

2015-11-18 01:59:52 user1925801

沒有必要爲此使用定位。你也不應該使用div來創建按鈕，原因有很多。

你能做的最好的事情是使用<button />元素，或者使用anchor tag代替：

HTML：

<a href="#" class="paddedButton khaki noUnderline">Button</a>

CSS：

.paddedButton 
{ 
    padding: 10px; 
} 

.khaki 
{ 
    background-color: khaki; 
} 

.noUnderline 
{ 
    text-decoration: none; 
} 

.noUnderline:hover 
{ 
    text-decoration: underline; 
}

來源

2015-11-18 02:28:48 Jase

HTML5在元素中定位文本時遇到的問題

回答

相關問題