1

わかりました、ドロップダウン バー内で画像を中央に配置する際に問題が発生しています。右に浮かせて中央に配置しようとしていますが、拒否されます。これが私のコードです：

 <!DOCTYPE html>

<html>
<head>
    <title>McBride-Taylor Inc.</title>
    <link rel="shortcut icon" href="/Resources/img/favicon.ico"/>

 <style type="text/css">   
body {
    margin:0;
    padding:0;
    background:#000000
}


.content {
    background:#FFFFFF;
    max-width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em;
    font: 80% arial;
    border-radius: 5px;
}

.menu {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    background:#FFFFFF;
    height:50px;
    list-style:none;
    margin:0;
    padding:0;

    border-radius: 15px;
}

.menu > li {
    float:left;
    padding:0px 0px 0px 15px;
}

.menu a {
    color:#000000;
    display:block;
    font-weight:normal;
    line-height:50px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu a:hover{
    background:#000000;
    color:#FFFFFF;

    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}

.menu li ul {
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    position:absolute;
    width:200px;
    z-index:200;
    background:#FFFFFF;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.menu li:hover ul {
    display:block;      
}

.menu li li {
    display:block;
    float:none;
    width:200px;
}
?
  </style>
</head>

<body>  
<img src="/Resources/img/Header.png" width=100% style={margin:0;padding:0;}/>

<div>
<ul class="menu">
   <li><a href="/index.html" >Home</a></li>
   <li><a href="#" id="current">About</a>
       <ul>
           <li><a href="/About+Us.html">Company Info</a></li>
       </ul>
   </li>
   <li style="float: right;"><a href="https://www.facebook.com/McBrideTaylorInc"><img src="/Resources/img/facebook.png"/></a></li>
</ul>
</div>

<div class="content">
    <h2 style="text-align: center">About McBride-Taylor</h2>
</div>
</body>
</html>

あなたがそれを見る必要がある場合に備えて、ここでホストしています: http://mcbtaytest.zymichost.com/About+Us.html v-align も試してみましたが無駄でした。

編集: text-align に気付き、削除しました。何も変わらないことに気づきます。

4

2 に答える 2

1

Facebookの画像のことですか？

それに追加vertical-align: middle;するだけです。

多分問題はあなたが試しv-alignたことですが、それはvertical-align.

ただし、インライン スタイルは使用しないでください。代わりに、classes/id を使用する必要があります。

<li class="facebook">
    <a href="https://www.facebook.com/McBrideTaylorInc">
        <img src="/Resources/img/facebook.png">
    </a>
</li>

そして、それをスタイルします：

.facebook{
    float: right; text-align: center;
}
.facebook>a>img{
    vertical-align: middle;
}
于 2012-08-31T01:13:51.440 に答える
0

vertical-align: middleイメージで使うだけ

<img src="/Resources/img/facebook.png" style="vertical-align: middle" />
于 2012-08-31T01:16:59.213 に答える