0 
<div class="button">

<p>
 <style>
a.button1 {
float: left;
height: 398px;
margin: 59px 0px 0px 17px;
background-image: url("i/about-button.gif");
text-indent: -9999px;
display: inline-block;
}

a#about-button {
width: 340px;
background-position: 0px 0px;}

a#about-button:hover {
background-position: 0px -796px;}

a#about-button:active {
background-position: 0px -398px;}</style>
<body>
<a href="about.html" class="button1" id="about-button" image></a>
</body>
</p>
</div>

わかりました、私はこれで初心者なので、我慢してください。ナビゲーションボタンを中央に揃えようとしています。つまり、ウィンドウの幅に関係なく、ほとんどの場合、ウィンドウは中央に留まります。現在、それらはすべて左に整列しています。

a.button1、a.button2、a.button3、a.button4があります。それらは互いに完全に整列しています。それらをすべて中央に移動させる方法を理解する必要があります。申し訳ありませんが、他のトピックで私の種類のコードに役立つ答えを見つけることができませんでした。ヘルプ！

4

2 に答える 2

1

このようなものを使用して、途中でいくつかのものを揃えることができます

頭の中で：

<style>
.button {
    text-align:centre;
}
.button > * {
    display:inline-block;
}
</style>

そして、物事を中央に配置したい時点で：

<div class="button">
    <a href="about.html" class="button1" id="about-button"></a>
    <a href="contact.html" class="button2" id="contact-button"></a>
</div>

そして、これらの 2 つのリンクが div 内で中央揃えに配置されますbutton。その div のすべての直接の子要素も中央に配置されます。

ところで、html は次のようになります。

<html>
<head>
<style>
a.button1 {
float: left;
height: 398px;
margin: 59px 0px 0px 17px;
background-image: url("i/about-button.gif");
text-indent: -9999px;
display: inline-block;
}

a#about-button {
width: 340px;
background-position: 0px 0px;}

a#about-button:hover {
background-position: 0px -796px;}

a#about-button:active {
background-position: 0px -398px;}
</style>
</head>
<body>
<div class="button">
<p>
<a href="about.html" class="button1" id="about-button" image></a>
</p>
</div>
</body>
</html>
于 2012-11-28T21:39:27.240 に答える
0

これを行うには、いくつかのことを理解する必要があります。

  1. ボタンを左にフロートさせることはできず、中央に留まることが期待されます。
  2. あなたは必要ありません<div><p><a>- その余分なマークアップは物事を複雑にするだけです.
  3. ウィンドウの中央に何かを配置するには、 に設定text-align: centerするか、body全幅の要素 (以下の div など) を設定します。

あなたのスタイル、調整:

div.button {
    text-align: center;
}

a.button1 {
    height: 398px;
    margin: 59px auto 0px auto;
    background-image: url("i/about-button.gif");
    text-indent: -9999px;
    display: inline-block;
}

a#about-button {
    width: 340px;
    background-position: 0px 0px;
}

a#about-button:hover {
    background-position: 0px -796px;
}

a#about-button:active {
    background-position: 0px -398px;
}

HTML は次のようにすればよいだけです。

<div class="button">
        <a href="about.html" class="button1" id="about-button" image></a>
</div>

編集: あなたはあなたのナビゲーションボタンについて言及したので、複数のリンクでも何が機能するかを示したいと思いました:

まず、HTML に必要なのはこれだけです。

<div class="button">
        <a href="about.html" class="button1" id="about-button"></a>
        <a href="about.html" class="button1" id="about-button"></a>
        <a href="about.html" class="button1" id="about-button"></a>
</div>

また、ボタンの幅と高さが非常に大きいため、ボタンの CSS を少し変更する必要があります。

于 2012-11-28T21:42:04.357 に答える