DIV 안에있는 텍스트를 아래쪽에 맞추기

보기 jsfiddle http://jsfiddle.net/buqhK/embedded/result/. 그 공백은 로고이고 오른쪽은 내가 로고와 같은 높이에 있기 때문에 바닥으로 옮기고 싶다는 것입니다. 그 텍스트 Lorania. 내가 어떻게 해?DIV 안에있는 텍스트를 아래쪽에 맞추기

여기 내 HTML입니다 : 여기

<div id="header"> 
    <div id="header-wrap"> 
     <div id="logo"></div> 
     <div id="header-text">Lorania</div> 
     <hr> 
     <div id="menu"> 
      <ul> 
       <li><a href="#" class="righter">aktualley</a> 
       </li> 
       <li><a href="#" class="righter">local thing</a> 
       </li> 
       <li><a href="#" class="righter">local club</a> 
       </li> 
       <li><a href="#" class="righter">local lore</a> 
       </li> 
       <li><a href="#" class="righter">contact</a> 
       </li> 
       <li><a href="#" class="righter2">photogaller</a> 
       </li> 
       <li><a href="#">contast</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

을하고하는 것은

/* Main CSS*/ 
html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif; 
} 

/* HEADER */ 
#header { 
    background-color: black; 
    background-position: center center; 
    background-repeat: repeat-y; 
    height: 172px; 
    width: 100%; 
    position: relative; 
} 
#header-wrap { 
    text-align: center; 
    margin: 0 auto; 
    height: 140px; 
    width: 800px; 
    padding-top: 30px; 
} 
#logo { 
    background-color: white; 
    background-repeat: no-repeat; 
    height: 80px; 
    width: 330px; 
    margin-bottom: 20px; 
    float: left; 
} 
#header-text { 
    color: #fff; 
    font-size: 40px; 
    float: right; 
} 
#header hr { 
    clear: both; 
    border: 0; 
    height: 1px; 
    background: transparent; 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:  -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
} 
#menu ul { 
    margin: 0; 
    padding: 0; 
} 
#menu li { 
    display: block; 
    float: left; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#menu a { 
    color: white; 
    text-decoration: none; 
} 
#menu a:hover { 
    text-decoration: underline; 
} 
#menu a:active { 
    text-decoration: underline; 
    text-shadow: 0 0 2px white; 
} 
.righter { 
    margin-right: 39px; 
} 
.righter2 { 
    margin-right: 38px; 
}

감사합니다 내 CSS입니다!

출처

2013-05-06 Kyrbi

이렇게하면? http://jsfiddle.net/ExplosionPIlls/buqhK/1/ –

당신은 그것에 가깝지만 이것처럼 바닥에 allligned 말입니다. http://i.imgur.com/fLMmp5h.png – Kyrbi

어때요?

#header-text { 
color: #FFFFFF; 
float: right; 
font-size: 40px; 
padding-top: 40px; }

출처

2013-05-06 21:54:01

예, 작동합니다. 나는 지금 정말로 바보 같았다. – Kyrbi

@Kyrbi 잘 알고있어 기뻐요 :) 그리고 멋지다. 그것에 대해 나쁘지 않다. –

최근에 비슷한 문제가 발생했습니다. 내가 한 일은 로고와 텍스트를 자체 div에 넣는 것입니다. 바깥 쪽 div는 display:inline-block 이었으므로 이미지에서 div를 최소 높이 (width:100%)로 확장하므로 부모의 너비를 모두 차지하므로 position:relative 로고가 텍스트와 완전히 일치 할 수 있습니다. 또한 필요한 경우 외부 div "header-top"에 추가 할 수있는 로고의 아래쪽 여백도 제거했습니다.

나는 지저분하다는 것을 알고 있지만 실제로는 더 나은 방법을 찾지 못했습니다. 어쨌든,이게 내가 생각해 낸거야. 니가 원한거야? http://jsfiddle.net/buqhK/3/embedded/result/

출처

2013-05-06 21:51:56 AniDev

DIV 안에있는 텍스트를 아래쪽에 맞추기

답변

관련 문제