On .logo, h1.logo
remove float: left;
. Then on .logo img, .logo .text-logo, .logo .description
put
CSS:
.logo img, .logo .text-logo, .logo .description{
display: block;
margin: 0 auto;
}
質問
I am struggling to get the header logo on http://inksharks.com centered in most desktop browsers. It does center when scaled to a mobile or tablet view. I have tried several things this was the closest I got to fixing it but it altered my footer as well.
.wrap-inner .twelve.pane {
margin-left: 0 !important;
width: 930px;
}
解決
On .logo, h1.logo
remove float: left;
. Then on .logo img, .logo .text-logo, .logo .description
put
CSS:
.logo img, .logo .text-logo, .logo .description{
display: block;
margin: 0 auto;
}
他のヒント
<h1 class="logo img-only">
</h1>
add an align attribute to this, and it will look like
<h1 class="logo img-only" align="center">
</h1>
It will work fine
This will center align your logo:
h1.logo {
float: none;
}
div.wrap-inner {
text-align: center;
}
I am overriding the float: left
on your h1.logo
, it's better to remove it though if you can.
Also remove padding-top:44px
from .nav-right .navigation-wrap
to fix the space between the logo and your content.