将徽标置于标题中

问题描述：

我知道我必须错过某些愚蠢的东西，但我无法弄清楚为什么我的徽标不会集中在我们的移动网站上。请下770px屏幕宽度看看这个网站：http://www.estiponagroup.com/dev 将徽标置于标题中

CSS：

.main-header .logo-and-menu-container .logo-column { 
    float: none !important; 
    margin: 0 auto !important; 
    max-width: 770px !important; 
    width: 100% !important; 
    display: block; 
    min-height: 120px; 
} 
.header-logo.logo-image img{ 
    display:block; 
    position:relative; 
    margin:0 auto; 
    width:100%; 
    max-width:304px; 
} 
.main-header .logo-and-menu-container .logo-column::after{ 
    content:''; 
    display:block; 
    clear:both !important;}

HTML

<div class="logo-column"> 
      <style>.logo-image { width: 304px; }</style><a class="header-logo logo-image" href="http://www.estiponagroup.com/dev"> 
<img width="304" height="108" alt="logo" src="//www.estiponagroup.com/dev/wp-content/uploads/eg-logo-300.png">

任何人都可以点我得到这个标志，中心的方向？

它对我来说工作正常https://jsfiddle.net/DIRTY_SMITH/px46uvz8/ –

它不是以铬为中心。 –

我在FF工作，它也不工作。也许在父母的div设置？ – MattM

答

一下添加到媒体查询

@media (max-width: 770px){ 
     .logo-image { 
     max-width: 384px; 
     margin-left: auto; 
     margin-right: auto; 
    } 
}

这是最好的答案。 –

工作，谢谢！ – MattM

答

您需要了解CSS是如何工作的。

你所有的元素从他们的父母那里获得一些财产。

因此，在您的情况下，您显示logo-column class的网站会限制div的大小，因此徽标不能位于中心位置，因为他的widgets 80px有限，并且有右侧边距。

因此，我在我的浏览器中测试并更改为此。

变化直列[线86]类。主要头.logo和菜单容器.logo列本

width:100% 
max-width:100%;

我还添加了一个容限左和右自动并设置显示模块，这样做（提高幅度大小和<一>元素设置为下面的代码，让您的标志是对的中间。

<a style="margin-right: auto; margin-left: auto; display: block;" href="http://www.estiponagroup.com/dev" class="header-logo logo-image">

诗：你应该改变“硬编码”在css中的css文件中。

检查结果：http://snag.gy/pfsk1.jpg

内联风格不是要走的路，用户只需要在移动视图上进行更改。 –

我同意你的看法，他需要更改正确的文件的代码，我只是说他的实际代码会卡住，如果他试图将div限制为受其父母限制。 –

将来尽可能全面地回答问题，我会看到你在回答中花了很多时间，所以你走在正确的轨道上，看看我的答案，这很短暂，很重要。它回答了所有问题，我不是想要让你甜心，如果我今天还有任何投票，我仍然会赞成答案。 –

答

删除规则：

media="all" .header-logo.logo-image 
display: block;

，并添加：

margin: 0 auto; 
display: block;

的图像（右介质尺寸）。

答

给一个margin: 0 auto;在媒体查询

.main-header .logo-and-menu-container .logo-image { 
    margin: 0 auto; 
}

答

围绕标志标签这里是每一个事情为中心的完整和完美的参考。 centering elements with css

将徽标置于标题中

相关推荐