將徽標置於標題中

我知道我必須錯過某些愚蠢的東西，但我無法弄清楚爲什麼我的徽標不會集中在我們的移動網站上。請下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">

任何人都可以點我得到這個標誌，中心的方向？

來源

2015-09-04 MattM

它對我來說工作正常https://jsfiddle.net/DIRTY_SMITH/px46uvz8/ –

它不是以鉻爲中心。 –

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

一下添加到媒體查詢

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

來源

2015-09-04 23:32:50

這是最好的答案。 –

工作，謝謝！ – 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

來源

2015-09-04 23:33:49

內聯風格不是要走的路，用戶只需要在移動視圖上進行更改。 –

我同意你的看法，他需要更改正確的文件的代碼，我只是說他的實際代碼會卡住，如果他試圖將div限制爲受其父母限制。 –

將來儘可能全面地回答問題，我會看到你在回答中花了很多時間，所以你走在正確的軌道上，看看我的答案，這很短暫，很重要。它回答了所有問題，我不是想要讓你甜心，如果我今天還有任何投票，我仍然會贊成答案。 –

刪除規則：

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

，並添加：

margin: 0 auto; 
display: block;

的圖像（右介質尺寸）。

來源

2015-09-04 23:34:45 piotrwest

給一個margin: 0 auto;在媒體查詢

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

來源

2015-09-04 23:35:43 Webpandit

圍繞標誌標籤這裏是每一個事情爲中心的完整和完美的參考。 centering elements with css

來源

2015-09-04 23:39:46 IRDN

將徽標置於標題中

回答

相關問題