我想在具有奇异性的标题中居中两个元素。这是我的html代码
<div class="l-branding">
<div class="l-region l-region--branding">
<div class="block block--block block--block-5" id="block-block-5">
<div class="block__content">
<p><a target="_self" href="http://somoscoatepec.com"><img width="280" height="139" title="" alt="logotipo" src="http://somoscoatepec.com/sites/default/files/logocoate.png"></a></p>
</div>
</div>
<nav class="block block--system block--menu block--system-main-menu" role="navigation" id="block-system-main-menu">
<ul class="menu">
<li class="first leaf"><a title="menu" href="/section">menu element</a></li>
<li class="leaf"><a title="" href="/que-hacer">menu element</a></li>
<li class="leaf"><a title="" href="/que-ver">menu element</a></li>
<li class="leaf"><a title="" href="/que-comprar">menu element</a></li>
<li class="leaf"><a title="" href="/hoteles-y-restaurantes">menu element</a></li>
<li class="leaf"><a title="" href="/blog">menu element</a></li>
<li class="last leaf"><a title="" href="/contact">menu element</a></li>
</ul>
</nav>
</div>
</div>
我拥有的 sass 代码是:
// layout
$grids: 12;
$gutters: 5px;
// branding and logotype in #block-block-5
.l-branding {
@include grid-span(12,1);
padding: 0 0 0 5px;
clear:both;
background-color: #492527 ;
#block-block-5 {
@include grid-span(8, 6);
//background-color: #492527;
padding-top:10px;
clear:right;
}
}
// main menu
#block-system-main-menu {
@include grid-span(8, 5);
background-color: #492527;
height:100%;
z-index:10;
}
所以我尝试寻找是否有更好的解决中心元素的方法。
标识位于 ID #block-block-5 和 ID 为 #block-system-main-menu 的菜单中
菜单是个大问题,因为不管是从四列还是五列开始都不要调整,无论如何都有一点额外的空间,永远不要进入中心。任何想法来解决这个问题?