centrar logo

[elsolodigno]

Hola comunidad, tengo la sgte. línea:

Código HTML:

#header #logo { float:left; margin:0; padding:28px 0 10px 10px; }

Qué debo agregar para centrar el logo y también me quede responsive?, sí agrego padding:28px 0 10px 390px; lo centro pero no se ve en móviles porque queda fijo.

gracias de antemano!

[pzin]

Simplemente déjalo así:

Código CSS:

#logo {
  margin: 0 auto;
}
 

Si le pones float, no funciona, y si lo necesitas con, entonces tendrás que publicar más código, al menos el HTML/CSS relativo a la cabecea.

[elsolodigno]

Gracias por la pronta respuesta. Ya había probado esa opción pero nada...

Código HTML:

/* header */
.top-part { background:url(../image/top-hpart-bg.jpg) left top repeat-x; }
.t-part { width:960px; background-color:#2d2d2d; margin:0 auto; height:40px; padding:0 10px; }
#header { padding:0px 0px 0px 0px; position: relative; z-index:1200; width:980px; margin:0 auto 20px auto; }
#header #logo { float:left; margin:0; padding:28px 0 10px 10px; }
#language { float:left; font-size:14px; color:#ccc; line-height:40px; margin-left:10px; padding-left:10px; padding-right:5px; }
#language span { margin-right:5px; }
#language img { cursor: pointer; margin-right:5px; opacity:0.8; }
#language img:hover { opacity:1; }
#currency { float:left; color:#ccc; line-height:40px; font-size:14px; position:relative; }
#currency a { display:inline-block; padding:0px 4px; font-size:14px; color:#ccc; text-decoration:none; margin-right:2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#currency a b { color:#ccc; text-decoration:underline; }
#currency a:hover { text-decoration:underline; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#header #cart { position:absolute; z-index:1199; top:82px; right:10px; line-height:32px; }
#header #cart .heading { float: right; padding:0 5px 0 0px; position: relative; }
#header #cart .heading h4 { background:#000; width:29px; height:27px; display:inline-block; float:left; margin:8px 8px 0 0; }
#header #cart .heading a { text-decoration: none; font-size:16px; height:36px; float:left; color:#444; }
#header #cart .heading a span { background:url('../image/arrow-down.png') 100% 50% no-repeat; padding-right: 15px; display:inline-block; margin-top:5px; }
#header #cart .content { clear: both; display:none; position:absolute; padding:8px; min-height: 150px; border:1px solid #eee; background: #FFF; width:350px; right:0; top:36px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.2); }
#header #cart.active .heading { }
#header #cart.active .content { display: block; }
.mini-cart-info table { border-collapse: collapse; width: 100%; margin-bottom: 5px; }
.mini-cart-info td { color: #000; vertical-align: top; padding: 10px 5px; border-bottom: 1px solid #EEEEEE; }
.mini-cart-info .image { width: 1px; }
.mini-cart-info .image img { border: 1px solid #EEEEEE; text-align: left; }
.mini-cart-info .name small { color: #666; }
.mini-cart-info .quantity { text-align: right; }
.mini-cart-info td.total { text-align: right; }
.mini-cart-info .remove { text-align: right; }
.mini-cart-info .remove img { cursor: pointer; }
.mini-cart-total { text-align: right; }
.mini-cart-total table { border-collapse: collapse; display: inline-block; margin-bottom: 5px; }
.mini-cart-total td { color: #000; padding:0px; margin:0; }
#header #cart .checkout { text-align: right; clear: both; }
#header #cart .empty { padding-top: 50px; text-align: center; }
.t-part #search { position:relative; float:right; z-index:15; line-height:25px; margin-left:10px; margin-top:7px; }
.t-part .button-search { position:absolute; right:0px; background: url('../image/button-search.png') center center no-repeat; width:28px; height:24px; cursor: pointer; }
.t-part #search input { background:#fff; opacity:0.5; padding:0px 30px 0px 12px; width:120px; height:25px; -webkit-border-radius:20px; -moz-border-radius:20px; -khtml-border-radius:20px; border-radius:20px; border:0px none; color:#111111; font-size:13px; line-height:25px; }
.t-part #search input:focus { opacity:1; color:#000; }
.t-part #welcome { text-align:right; float:right; color:#bbb; height:40px; line-height:40px; }
.t-part #welcome a { color:#ddd; text-transform:capitalize; text-decoration:underline; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.t-part #welcome a:hover { text-decoration:none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#header .links { float:right; font-size:14px; margin:20px 10px 10px 0; }
#header .links a { float: left; display: block; padding: 0px 0px 0px 7px; color:#666; text-decoration: none; font-size: 13px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#header .links a + a { margin-left: 8px; border-left:1px dotted #666; }
#header .links a:hover { text-decoration:underline; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

@media screen and (max-width:768px) {

#header {
width:auto!important;
}

#header {
min-height:auto;
text-align:center;
margin:0 auto;
}

}

[pzin]

Y ahora faltaría el HTML, como dije.

Pero sólo lo relativo a la cabecera.

[elsolodigno]

Iniciado por pzin

Y ahora faltaría el HTML, como dije.

Pero sólo lo relativo a la cabecera.

Hola, disculpá, está en un .tlp:

Código HTML:

<div id="header">
    <div class="t-part"> <?php echo $currency; ?> <?php echo $language; ?>
      <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
  </div>
      <div id="welcome">
        <?php if (!$logged) { ?>
        <?php echo $text_welcome; ?>
        <?php } else { ?>
        <?php echo $text_logged; ?>
        <?php } ?>
      </div>
    </div>
    <?php if ($logo) { ?>
    <div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
    <?php } ?>
    <div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
    <?php echo $cart; ?>
    <div class="clear"></div>
    <?php if ($categories) { ?>
    <nav id="menu">
    <span>Menu</span>
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
          <?php if ($category['children']) { ?>
          <div>
            <?php for ($i = 0; $i < count($category['children']);) { ?>
            <ul>
              <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
              <?php for (; $i < $j; $i++) { ?>
              <?php if (isset($category['children'][$i])) { ?>
              <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
              <?php } ?>
              <?php } ?>
            </ul>
            <?php } ?>
          </div>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>      
      </nav>
    <?php } ?>
   <div class="clear"></div>
  </div> 

[C2am]

Supongo que pzin se refería al html generado por el php y no el php.

[elsolodigno]

Iniciado por C2am

Supongo que pzin se refería al html generado por el php y no el php.

Hola de nuevo, este el html generado:

Código HTML:

<header class="top-part">
  <div id="header">
    <div class="t-part"> <form action="http://localhost/upload/index.php?route=module/currency" method="post" enctype="multipart/form-data">
  <section id="currency">
  <span>Currency</span>
                <a title="Euro" onclick="$('input[name=\'currency_code\']').attr('value', 'EUR'); $(this).parent().parent().submit();">€</a>
                    
                <a title="Pound Sterling" onclick="$('input[name=\'currency_code\']').attr('value', 'GBP'); $(this).parent().parent().submit();">£</a>
                    
                <a title="US Dollar"><b>$</b></a>
        
                
        <input type="hidden" name="currency_code" value="" />
    <input type="hidden" name="redirect" value="http://localhost/upload/index.php?route=common/home" />
  </section>
</form>
 <form action="http://localhost/upload/index.php?route=module/language" method="post" enctype="multipart/form-data">
  <section id="language"><span>Language</span>
        <img src="image/flags/gb.png" alt="English" title="English" onclick="$('input[name=\'language_code\']').attr('value', 'en'); $(this).parent().parent().submit();" />
        <input type="hidden" name="language_code" value="" />
    <input type="hidden" name="redirect" value="http://localhost/upload/index.php?route=common/home" />
  </section>
</form>
      <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="Search" value="" />
  </div>
      <div id="welcome">
                Welcome visitor you can <a href="http://localhost/upload/index.php?route=account/login">login</a> or <a href="http://localhost/upload/index.php?route=account/register">create an account</a>.              </div>
    </div>
        <div id="logo"><a href="http://localhost/upload/index.php?route=common/home"><img src="http://localhost/upload/image/data/logo.png" title="Your Store" alt="Your Store" /></a></div>

...........

       <div class="clear"></div>
  </div>
</header> 

Muchas gracias.

[pzin]

Pues te vale lo que te dije al principio, márgenes laterales automáticos.

Código CSS:

#logo {
  margin: 0 auto;
}