[英]HTML/CSS: Middle Vertical Align
Hi I'm trying to middle vertical align my site's logo with my navigation link list. 嗨,我正在尝试使网站的徽标与导航链接列表垂直居中对齐 。 I've tried adding "vertical-align: middle" to my div columns, but nothing happens.
我已经尝试在我的div列中添加“ vertical-align:middle”,但是什么也没有发生。 Right now my logo and my navigations look kinda weird and is just floating around.
现在,我的徽标和导航看起来有点怪异,而且随处可见。 Any help on this would be great.
任何帮助都会很棒。
HTML: 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>
Column CSS: 列CSS:
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
}
Here's how it currently looks like: 当前是这样的:
Need to move it to the middle: 需要将其移到中间:
- Specify the parent container as
position: relative
orposition: absolute
.将父容器指定为
position: relative
或position: absolute
。- Specify a fixed height on the child container.
在子容器上指定固定高度。
- Set
position: absolute
andtop: 50%
on the child container to move the top down to the middle of the parent.设置
position: absolute
和top: 50%
position: absolute
子容器上的top: 50%
,以将顶部向下移动到父容器的中间。- Set
margin-top: -yy
whereyy
is half the height of the child container to offset the item up.设置
margin-top: -yy
,其中yy
是子容器高度的一半,以向上偏移项目。
( http://phrogz.net/CSS/vertical-align/ ) ( http://phrogz.net/CSS/vertical-align/ )
.columns
( position: relative
) or absolutely position it ( position: absolute
) .columns
( position: relative
)或将其绝对定位( position: absolute
) .column
a height
value .column
一个height
值 .column
( position: absolute
) , and give it top: 50%
.column
( position: absolute
) ,并为其赋予top: 50%
.column
a top margin of the negative of half its height
value ( margin-top: -yy
where yy is half of the height of .column
) .column
的上边距作为其height
值的一半的负数( margin-top: -yy
,其中yy是.column
高度的.column
) As you have already used vertical-align: middle
in class; 正如您已经使用了
vertical-align: middle
类的vertical-align: middle
类; so by just adding display: table-cell
property your problem must solved. 因此只需添加
display: table-cell
属性即可解决您的问题。
Note: There are many ways to align content or div vertically.. using line-height
(condition is only apply for first line), padding-top
, table-cell
and giving absolute
position. 注意:有很多方法可以垂直对齐内容或div ..使用
line-height
(条件仅适用于第一行), padding-top
, table-cell
和给出absolute
位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.