Sensitive center alignment div

Question

Inside the structure below, it’s shown how to best align the div#logo in the middle of the grid_12 visible div div only for non-mobile devices.

Can I create a custom code snippet to override the above classes?

I created Plunker with my code - 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

Give the div with the logo id width and set its margin-left and margin-right css properties automatically. Also setting the maximum width to 100% will ensure responsive behavior.

 #logo{ width: 100%; max-width: 300px; /* Original width of the logo image */ margin-left: auto; margin-right: auto; text-align: center; float: left; } 

and I hope you have already done this, but ..

 #logo img{ max-width: 100%; height: auto; } 

UPDATE:

Change your markup this way

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

But then you have to use media queries to configure #search css as layout changes. I also made some CSS changes above (before the update section).

Answer 2

Only you have to write a single line margin: 0 auto;

 #logo { margin:0 auto; }