HTML/CSS：中间垂直对齐

嗨我正在尝试中间垂直对齐我的网站徽标与我的导航链接列表。我试过向我的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

来源

2014-03-18 otasi

任何机会，你可以在http://jsfiddle.net提供演示，以便我们可以玩它（不必读取p作为您的HTML中的服务器端代码）？ – nnnnnn

指定父容器作为position: relative或position: absolute。

指定子容器的固定高度。

设置子容器上的position: absolute和top: 50%将顶部向下移动到父项的中间。

设置margin-top: -yy其中yy是子容器高度的一半来抵消项目。

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

要么相对位置.columns （position: relative）或绝对定位它 （position: absolute）
给.column一个height值
绝对位置.column （position: absolute），并给它top: 50%
给.column其height值一半 的负的顶缘（margin-top: -yy其中yy是.column高度的一半）

来源

2014-03-18 21:30:42 jczimm

边缘顶部，作品像魅力。谢谢！ – otasi

没问题！乐意效劳！ @otasi – jczimm

正如您已经在课堂上使用vertical-align: middle;所以只需加入display: table-cell属性您的问题必须解决。

注：有许多方法来对齐内容或..采用div垂直line-height（条件只适用于第一行），padding-top，table-cell并给予absolute位置。

来源

2014-03-18 21:28:50

HTML/CSS：中间垂直对齐

回答

相关问题