对齐敏感div中心
问题描述:
在下面的结构中,只有非移动设备才能将div#logo
对齐到grid_12 visible
div的中间的最佳方法是什么?对齐敏感div中心
我可以创建一段自定义代码来覆盖上述类吗?
我创建了一个Plunker我的代码 - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS
HTML:
<header class="row visible">
<div class="grid_12 visible">
<div class="row logo-wrap">
<!-- logo -->
<div class="grid_6">
<div id="logo">
<a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles" /></a>
</div>
</div>
<!-- search -->
<div class="grid_6 visible">
<div id="search">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
</div><!--/search-->
</div>
</div><!--/row-->
</div><!--/grid_12-->
</header><!--End Header-->
答
给的分度标志的id的宽度,并设置其保证金左和利润率右CSS属性自动..也设置最大宽度为100%将确保响应行为..
#logo{
width: 100%;
max-width: 300px; /* Original width of the logo image */
margin-left: auto;
margin-right: auto;
text-align: center;
float: left;
}
我希望你已经做到了这一点,但..
#logo img{
max-width: 100%;
height: auto;
}
UPDATE:
修改您的标记,像这样
<div id="container-top">
<div id="logo">
<a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles"></a>
</div>
<!-- search -->
<div id="search" class="visible">
<div class="button-search">Search</div>
<input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
</div>
<!--/search-->
</div>
#container-top{
position: relative;
}
#search{
top: 15%;
right: 0;
}
但你将不得不使用媒体查询调整#搜寻CSS作为布局的变化.. 另外我做了一些CSS更改以上(更新部分之前)..
答
只有你必须写一行margin: 0 auto;
#logo
{
margin:0 auto;
}
谢谢,但是当我把它做得更大,然后300px它回到左边为什么?我希望它在'grid_12 visible'div的中间居中'div – 2013-03-23 05:03:31
post_css for'grid_12'或者你有工作草案吗? – 2013-03-23 05:04:50
查看链接的问题 - http://plnkr.co/edit/lrRm0nXdYaz5g7dYe4DS或http://dev.jzm.co.nz/mytime/ – 2013-03-23 05:08:40