Question

好的我在下拉栏中将图像居中的问题。我试图让它向右浮动并居中，但它拒绝。这是我的代码：

 <!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无济于事。

编辑：我注意到文本对齐并将其删除。我意识到它不会改变任何东西。

Answer 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;
}

Answer 2

在图片中使用vertical-align: middle

<img src="/Resources/img/facebook.png" style="vertical-align: middle" />

在下拉菜单中对齐中心的元素

2 个答案: