정렬되지 않은 목록을 중간에 있지 않게 설정하려면 어떻게해야합니까 (이미지 참조)?

어떻게하면 다음 이미지를 얻을 수 있습니까? 내 목록 요소가 중간에 있도록하고 싶습니다. 지금까지 시도한 것은 로고 (또는 H1)와 같은 줄에 정렬되었습니다.정렬되지 않은 목록을 중간에 있지 않게 설정하려면 어떻게해야합니까 (이미지 참조)?

나는 여백 위쪽을 리에 적용하려고했지만 전혀 작동하지 않았다. 누군가 내가 잘못 갔을 때 나를 안내 할 수 있으면 고맙겠습니다.

감사

enter image description here

내 시도 :

<html> 
<header> 
    <link rel="stylesheet" type="text/css" href="style2.css"></header> 
<body> 
    <div> 
     <h1 class="logo">LogoHere</h1> 

     <ul class="nav-menu"> 
      <li><a href="index.html">Action</a></li> 
      <li><a href="about.html">Who we are</a></li> 
      <li><a href="blog.html">Blog</a></li> 
      <li><a href="services.html">Services</a></li> 
      <li><a href="contact.html">Get in touch</a></li> 
     </ul> 
    </div> 
</body>

CSS :

.logo { 
    display: inline-block; 
    position: relative; 
    font-family: times, Times New Roman, times-roman, georgia, serif; 
    font-size: 54px; 
    line-height: 40px; 
    letter-spacing: -5px; 
    color: #444444; 
    margin: 0 0 0 0; 
    padding-top: 25px; 
    padding-left: 25px; 
    font-weight: 100; 
} 

.nav-menu { 
    display: inline-block; 
    list-style-type: none; 
    font-size: 20px; 
    padding: 0px; 
    margin-top: 0px; 
    padding-left: 50px; 
    width: 55%; 
    margin-left: 10px; 
} 

.nav-menu li { 
    display: inline; 
    margin: 0px 20px 20px 0px; 
} 

.nav-menu li a { 
    text-decoration: none; 
    color: grey; 
} 

li a:hover {color: #444444;} /* mouse over link */ 

li a:active { 
    color:white; 
    text-decoration: underline; 
} /* selected link */

출처

2013-09-07 Umz15

시도 :

.setMiddle 
{ 
    vertical-align:middle; 
}

그것은 상자에 요소 중간 설정 (DIV). 몇 마진을 채웠습니다. 먼저 이것을 제거한 다음 .setMiddle을 적용하십시오. 이 중 하나를 h1 또는 ul과 같이 적용해야합니다.

편집 : .setMiddle을 h1에 적용하고 li에 적용하십시오. http://jsfiddle.net/6uuXC/1/

출처

2013-09-07 18:03:39 Ashwani

로고의 패딩 윗부분을 제거하여 포지셔닝을 맨 위까지 바 꾸었습니다. 중간으로 설정했지만 효과가 있었지만 원하는 바가 아닙니다. 패딩을 제거하지 않는 방법이 있습니까? .logo div보다 약간의 공간이 필요합니다. – Umz15

ohnvm, 작동했습니다. 이 모든 것을 래핑하는 첫 번째 div에 패딩을 적용했습니다. – Umz15

트릭은 CSS을 사용하고 있습니다속성을 효과적으로 사용합니다. 이 작업을 수행하는 방법을 보여주는 fiddle이 있습니다.

HTML

<select multiple> 
    <option>One</option> 
    <option>Two</option> 
</select>

CSS 사용하기

header { 
    line-height: 100px; 
} 
header span { 
    padding: 0 0 0 20px; 
} 
.logo { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: red; 
}

출처

2013-09-07 18:02:57

안녕하세요, 답변 주셔서 감사합니다.하지만 내 코드에서는 작동하지 않습니다. 나는 line-height nav-menu li을 넣으려고했지만 아무 일도 일어나지 않았다. 목록으로 어떻게 작동하는지 예를 보여 주시겠습니까? – Umz15

정렬되지 않은 목록을 중간에 있지 않게 설정하려면 어떻게해야합니까 (이미지 참조)?

답변

관련 문제