-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>のため、幅と高さが 100% ではありません<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 に答える