对齐敏感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-->

来源

2013-03-23 Jess McKenzie

给的分度标志的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更改以上（更新部分之前）..

来源

2013-03-23 04:56:39

谢谢，但是当我把它做得更大，然后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

只有你必须写一行margin: 0 auto;

#logo 
{ 
    margin:0 auto; 
}

来源

2013-03-24 13:20:29

对齐敏感div中心

回答

相关问题