我可以設置href的寬度和高度100％

-2

我想創建一個背景圖像和文本在100％寬度和高度屬性的中心的菜單。我可以設置href的寬度和高度100％

我有這樣的代碼：

<div id="wrapper"> 
    <div id="container"> 
      <div><a class="aMenuHref" href="#">My Link</a></div> 
    </div> 
</div> 

.aMenuHref{ 
    font-size: large; 
    height: 35px; 
    display: inline-block; 
    width: 100%; 
} 

#container { 
    width: 100%; 
    height: 35px; 
    position: relative; 
    background: url(images/back1.jpg) no-repeat 0 0px; 
    } 
    #wrapper > #container { 
    display: table; 
    position: static; 
    } 
    #container div { 
    position: absolute; 
    top: 50%; 
    } 
    #container div div { 
    position: relative; 
    top: -50%; 
    } 
    #container > div { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 
    } 
#container:hover{ 
    background: orange; 
}

但我的HREF還沒有width: 100%和height: 100%。

謝謝！

來源

2013-10-19 user2700126

由於<body>，您的<a>沒有寬度和高度100％。

您可以將身體復位：

body { 
    margin: 0; 
    padding: 0; 
}

然後你就可以實現高度100％的：

html, body, #wrapper, #container, #container div, .aMenuHref { 
    height: 100%; 
}

中心的文字水平：

.aMenuHref { 
    text-align: center; 
}

和垂直：

.aMenuHref { 
    position: absolute; 
    top: 50%; 
}

最後的代碼如下所示：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 

<style> 
body { 
    margin:0; 
    padding:0; 
} 

html, body, #wrapper, #container, #container div, .aMenuHref { 
    height: 100%; 
} 

.aMenuHref{ 
    font-size: large; 
    height: 35px; 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
} 

#container { 
    width: 100%; 
    height: 35px; 
    position: relative; 
    background: url(images/back1.jpg) no-repeat 0 0px; 
} 

#container:hover{ 
    background: orange; 
}  

</style> 

<div id="wrapper"> 
    <div id="container"> 
      <div><a class="aMenuHref" href="#">My Link</a></div> 
    </div> 
</div> 

</body> 
</html>

來源

2013-10-19 11:12:49 Simone

謝謝！你的回答對我有用！ – user2700126

不客氣！請考慮通過點擊勾號來接受我的答案:) – Simone

我可以設置href的寬度和高度100％

回答

相關問題