Html 在下拉菜单中居中对齐图元_Html_Css

Html 在下拉菜单中居中对齐图元

html css

Html 在下拉菜单中居中对齐图元,html,css,Html,Css,好的，我有一个问题，在我的下拉栏中的图像居中。我试图让它向右浮动，居中，但它拒绝了。这是我的密码： <!DOCTYPE html> <html> <head> <title>McBride-Taylor Inc.</title> <link rel="shortcut icon" href="/Resources/img/favicon.ico"/> <style type="text/css"

好的，我有一个问题，在我的下拉栏中的图像居中。我试图让它向右浮动，居中，但它拒绝了。这是我的密码：

 <!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>


麦克布莱德·泰勒公司。
身体{
保证金：0；
填充：0；
背景：#000000
}
.内容{
背景：#FFFFFF；
最大宽度：80%；
左边距：自动；
右边距：自动；
边缘顶部：1.5em；
字体：80%arial字体；
边界半径：5px；
}
.菜单{
字体：67.5%“Lucida Sans Unicode”、“比特流Vera Sans”、“投石机Unicode MS”、“Lucida Grande”、Verdana、Helvetica、Sans serif；
字体大小：14px；
字体大小：粗体；
背景：#FFFFFF；
高度：50px；
列表样式：无；
保证金：0；
填充：0；
边界半径：15px；
}
.菜单>李{
浮动：左；
填充：0px 0px 0px 15px；
}
.菜单a{
颜色：#000000；
显示：块；
字体大小：正常；
线高：50px；
边际：0px；
填充：0px 25px；
文本对齐：居中；
文字装饰：无；
}
.菜单a：悬停{
背景：#000000；
颜色：#FFFFFF；
-webkit盒阴影：插入0px 0px 7px 2px rgba（0,0,0,3）；
-moz盒阴影：嵌入0px 0px 7px 2px rgba（0,0,0,3）；
盒影：插入0px 0px 7px 2px rgba（0,0,0,3）；
}
.菜单{
显示：无；
高度：自动；
填充：0px；
边际：0px；
位置：绝对位置；
宽度：200px；
z指数：200；
背景：#FFFFFF；
边框左下半径：15px；
边框右下半径：15px；
}
.菜单李：悬停ul{
显示：块；
}
.李莉{
显示：块；
浮动：无；
宽度：200px；
}
?









关于麦克布莱德·泰勒

我把它放在这里，以备您需要查看：正如您所看到的，它是向右刷新的，但不是垂直对齐的。我还尝试了v-align，但没有成功

编辑：我注意到文本对齐并删除了它。我意识到这不会改变任何事情。

你是说Facebook的形象吗

只需添加

垂直对齐：中间到它
可能问题是您尝试了v-align
，但它是vertical align

但是不应该使用内联样式。相反，您应该使用class/id：
<li class="facebook">
    <a href="https://www.facebook.com/McBrideTaylorInc">
        <img src="/Resources/img/facebook.png">
    </a>
</li>

你是说Facebook的形象吗
只需添加垂直对齐：中间到它
可能问题是您尝试了v-align
，但它是vertical align

但是不应该使用内联样式。相反，您应该使用class/id：
<li class="facebook">
    <a href="https://www.facebook.com/McBrideTaylorInc">
        <img src="/Resources/img/facebook.png">
    </a>
</li>

只需在图像中使用vertical align:middle

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

只需在图像中使用垂直对齐：中间
<img src="/Resources/img/facebook.png" style="vertical-align: middle" />