html - レスポンシブなdivセンターの調整

Question

以下の構造内で、モバイル以外のデバイスのみ div#logoのdivの中央にを配置できるようにするための最良の方法は何ですか。grid_12 visible

上記のクラスをオーバーライドするカスタムコードを作成できますか？

私は自分のコードでプランカーを作成しました-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-->

Answer 1

ロゴのIDを持つdivに幅を指定し、そのmargin-leftおよびmargin-right cssプロパティをautoに設定します。また、max-widthを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;
}

アップデート：

このようにマークアップを変更します

<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;
}

ただし、レイアウトの変更に応じて、メディアクエリを使用して#search cssを調整する必要があります。また、上記のCSSの変更をいくつか行いました（更新セクションの前）。

Answer 2

あなただけが一行書く必要がありますmargin: 0 auto;

#logo
{
    margin:0 auto;
}