對齊敏感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中心

回答

相關問題