좋습니다. 이것은 훨씬 쉬운 해결책이라고 생각합니다. 나는 당신이했던 것과 똑같은 html 레이아웃을 사용하지 않았 으면 좋겠지 만 ... 똑같은 일을한다. 게다가 순서가 맞지 않다면 실제로는 정렬되지 않은리스트 인 <ul></ul>을 사용하고, 레이아웃을 위해서는 <div></div> <span></span>, etc을 사용해야한다. . 업데이트 jsfiddle
: 어쨌든, 여기 당신이 원하는 무엇의 간단한 버전의
나는 내가 빨리 그것을 설명하기 위해 너무 많은 시간을 차지하지 않고 대답을하려고했던 작업에있어 죄송합니다 .. 아마도 도움이되지 않을 것입니다. 어쨌든, 내가 한 일에 대한 정보는 다음과 같습니다.
기본적으로 외부 div를 가져 와서 메뉴 클래스를 지정합니다. 상위 div 또는 메뉴의 메뉴에 높이와 너비를 지정하십시오. 그런 다음 각 링크를 자신의 div에 배치하십시오. 이들은 아이들 분파가 될 것입니다.
어린이를위한 CSS는 부모의 너비와 높이의 100 %를 제공합니다. 디스플레이가 인라인 블록이되도록 만들어야 라인이 서로 겹치지 않습니다. OK 지금까지 CSS 코드에서 모든 것을 이해하기는 쉽지만, 까다로운 부분은 다음과 같습니다.
링크를 세로로 정렬하려면 링크를 부모 높이의 50 %만큼 아래로 이동해야합니다. .. 최고 순위 : 50 %. 그렇다면 자신의 신장에 맞게 조정해야합니다. transform을 사용하면 이렇게 할 수 있습니다 : translateY (-50 %); 엘리먼트를 자신의 높이의 50 %만큼 위로 움직입니다.코드있어 여기 Vertically Center Elements
그리고 :
HTML :
<div id="menu">
<div class="child">
<a href="/joomla31/">Somos</a>
</div>
<div class="child">
<a href="/joomla31/index.php/segunda-pagina">Segunda Página</a>
</div>
<div class="child">
<a href="#">Este es un texto largo para el menú</a>
</div>
</div>
CSS :
#menu{
width: 100%;
height: 100px;
display: block;
}
.child{
margin: 1%;
background-color:#3d2f2f;
width: 30%;
height: 100%;
text-align: center;
display: inline-block;
}
a{
background: #ffdb4c;
position: relative;
top: 50%;
transform: translateY(-50%);
}
이것은 매우 간단한이고 당신은 내가 처음 여기에 주제에 읽은 기사에서 자세한 내용을보실 수 있습니다
가 추가 마크 업을 추가 할 수 있습니까? –
부모 요소에 텍스트 맞춤을 설정해야합니다. –