嗨我正在嘗試中間垂直對齊我的網站徽標與我的導航鏈接列表。我試過向我的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">∨</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"> ></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;
}
下面是它目前的樣子:
需要把它移動到中間:
任何機會,你可以在http://jsfiddle.net提供演示,以便我們可以玩它(不必讀取p作爲您的HTML中的服務器端代碼)? – nnnnnn