드롭 다운 메뉴 내에서 가운데에 요소 정렬

Ok 내 드롭 다운 표시 줄에 이미지를 가운데 정렬하는 데 문제가 있습니다. 나는 그것을 오른쪽으로 부유시키고 중심에 두려고 노력하지만 그것을 거부합니다. 당신이 플러시 권리가 아니라 수직으로 정렬 볼 수 있습니다 http://mcbtaytest.zymichost.com/About+Us.html로 : 나는 당신이 그것을 볼 필요가 여기 경우 호스팅이드롭 다운 메뉴 내에서 가운데에 요소 정렬

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

: 여기 내 코드입니다. 나는 또한 아무 소용이없는 V-align을 시도했다.

편집 : 텍스트 정렬을 발견하고 제거했습니다. 나는 그것이 아무것도 바뀌지 않을 것이라는 것을 깨닫는다.

출처

2012-08-31 user1632185

Facebook 이미지를 의미합니까?

그냥 vertical-align: middle;을 추가하십시오.

아마도 문제는 v-align을 시도했지만 vertical-align입니다.

하지만 인라인 스타일을 사용하면 안됩니다.

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

그리고 스타일이 : 대신, 당신은 클래스/ID를 사용해야합니다

.facebook{ 
    float: right; text-align: center; 
} 
.facebook>a>img{ 
    vertical-align: middle; 
}

출처

2012-08-31 01:13:51 Oriol

그냥 이미지에 vertical-align: middle를 사용을

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

출처

2012-08-31 01:16:59

드롭 다운 메뉴 내에서 가운데에 요소 정렬

답변

관련 문제