Question

我想在中心创建一个带有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%。

谢谢！

Answer 1

由于<a>，您<body>的宽度和高度不是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>

我可以设置href宽度和高度100％

1 个答案: