-2

我想创建一个菜单，其背景图像和文本位于中心，具有 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%.

谢谢！

4

1 回答 1

0

<a>由于<body>. _

您可以使用以下方法重置主体：

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-19T11:12:49.910 回答