0

このヘッダーの真ん中にサイト名を入れたいのですが、残念ながらできません。多くの組み合わせを試しましたが、できません。ソース載せておきます

CSS

.header {
    background-color:#00B9ED;
    height:50px;
    border-bottom:0px;
    padding-left:auto;
    padding-right:auto;
    width:100%;
}

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    padding-top:0px;
    padding-bottom:0px;
}

.logo {
    width:150px;
    margin: 0 auto;
}

.logo img {
    width:150px;
    height:50px;
}

.logo:hover {
    height:50px;
    background-color:#A9E2F3;
    cursor:pointer;
}

HTML

<div class="header">
    <div id="wrapper">
        <div class="logo">
            <img src="image.png" />
        </div>
    </div>
</div>

どうすればいいのかわかりませんか？ありがとう

4

3 に答える 3

1

以下のコードを使用

<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}

#wrapper {
margin-left:auto;
margim-right:auto;

padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
    width:150px;
    height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;   
cursor:pointer;
}
</style>

<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
于 2013-07-02T06:11:04.003 に答える
0

これを試して

CSS

    #wrapper {
        margin: 0 auto;
        padding-bottom: 0;
        padding-top: 0;
        width: 1000px;
    }

.logo {
    margin: 0 auto;
    width: 150px;
}

HTML

<div class="header">
<div id="wrapper">
<div class="logo">
<a href="#">logo<img src="image.png"  alt="LOGO"/></a>
</div>
</div>
</div>
于 2013-07-02T06:12:29.030 に答える
0

常に標準に従ってコーディングするようにしてください。使用できますが、段落やその他の要素をテキストtext-alignに揃えるためのものです。Insted align を使用することをお勧めします。margin:0 auto;width:150px;

ここにjsFiddleがあります

于 2013-07-02T06:15:02.347 に答える