2014-03-18 93 views
0

嗨我正在嘗試中間垂直對齊我的網站徽標與我的導航鏈接列表。我試過向我的div列添加「vertical-align:middle」,但沒有任何反應。現在我的標誌和我的導航看起來有點奇怪,只是漂浮在附近。任何對此的幫助都會很大。HTML/CSS:中間垂直對齊

HTML:

<div class="sixteen columns clearfix"> 
    <div class="five columns"> 
     <a href="{{ shop.url }}" title="{{ shop.name }}"> 
     {% if settings.use_logo %} 
     <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /> 
     {% else %} 
     {{ shop.name }} 
     {% endif %} 
    </a> 
     </div> 
    <div class="eleven columns"> 
    <div id="mobile_nav"></div> 
    <div id="nav"> 
     <ul id="menu"> 
     {% for link in linklists[settings.main_linklist].links %} 
      {% if linklists[link.handle] == empty %} 
      <li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li> 
      {% else %} 
      <li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}class="active"{% endif %}{% endfor %}>{{ link.title }} 
       <span class="arrow">&or;</span></a> 
       <ul> 
       {% for link in linklists[link.handle].links %} 
        {% if linklists[link.handle] == empty %} 
        <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> 
        {% else %} 
        <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }} <span class="arrow"> &gt;</span></a> 
        <ul> 
         {% for link in linklists[link.handle].links %}       
         <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li> 
         {% endfor %} 
        </ul> 
        </li> 
        {% endif %} 
       {% endfor %} 
       </ul> 
      </li> 
      {% endif %} 
     {% endfor %} 
     </ul> 
    </div> 
    </div> 
    </div> 

柱CSS:

.column, .columns { 
float: left; 
display: inline; 
margin-left: 10px; 
margin-right: 10px; 
vertical-align: middle; 
} 

下面是它目前的樣子:

enter image description here

需要把它移動到中間:

enter image description here

+0

任何機會,你可以在http://jsfiddle.net提供演示,以便我們可以玩它(不必讀取p作爲您的HTML中的服務器端代碼)? – nnnnnn

回答

3
  1. 指定父容器作爲position: relativeposition: absolute
  2. 指定子容器的固定高度。
  3. 設置子容器上的position: absolutetop: 50%將頂部向下移動到父項的中間。
  4. 設置margin-top: -yy其中yy是子容器高度的一半來抵消項目。

http://phrogz.net/CSS/vertical-align/

  • 要麼相對位置.columns   position: relative或絕對定位它  position: absolute
  • .column一個height
  • 絕對位置.column   position: absolute,並給它top: 50%
  • .columnheight值一半   的負的頂緣(margin-top: -yy其中yy是.column高度的一半)
+0

邊緣頂部,作品像魅力。謝謝! – otasi

+0

沒問題!樂意效勞! @otasi – jczimm

0

正如您已經在課堂上使用vertical-align: middle;所以只需加入display: table-cell屬性您的問題必須解決。

注:有許多方法來對齊內容或..採用div垂直line-height(條件只適用於第一行),padding-toptable-cell並給予absolute位置。