En alignant un réactif div centre

Au sein de la structure ci-dessous quelle est la meilleure façon d'être en mesure d'aligner les div#logo dans le milieu de la grid_12 visible div pour non seulement les appareils mobiles.

Puis-je créer un morceau de code pour remplacer les classes ci-dessus?

J'ai créé un Plunker avec mon 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-->

OriginalL'auteur Jess McKenzie | 2013-03-23

  1. 4

    Donner le div avec l'id du logo de la largeur et de définir sa margin-left et margin-right propriétés css pour auto.. aussi la fixation d'un max-width de 100% s'assurer de la réactivité du comportement..

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

    et j'espère que vous l'avez déjà fait mais..

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

    Mise à JOUR:

    Modifier votre balisage comme

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

    Mais vous aurez à utiliser les media queries pour adapter votre #de recherche css modifications de mise en page..
    J'ai également fait un peu de CSS modifications ci-dessus (avant la mise à jour de l'article)..

    Merci, Mais quand je le fais tout plus grand que les 300px, il va revenir à alignée à gauche, pourquoi? Je veux qu'il soit centré au milieu de la grid_12 visible div
    post css pour grid_12 ou vous avez un projet?
    Voir le lien en question - plnkr.co/modifier/lrRm0nXdYaz5g7dYe4DS ou dev.jzm.co.nz/mytime
    Pour moi, il fonctionne très bien.. c'est toujours centré avec la réponse que j'ai donné
    si vous voulez qu'il soit centré à l'intérieur de la red background ainsi, lorsque vous réglez la hauteur de plus de l'image du logo original de la hauteur, puis ajouter text-align: center à #logo

    OriginalL'auteur Lucky Soni

  2. 2

    Que vous avez à écrire une seule ligne margin: 0 auto;

    #logo
{
    margin:0 auto;
}

    OriginalL'auteur Akshaya Raghuvanshi