在div中居中放置圖像

我已經將div中的圖像邊框設置爲無。我現在想要將該圖像置於其包含的div內。我曾嘗試使用margin: 0 auto;，但那沒有奏效。在div中居中放置圖像

我相信我忽視的東西愚蠢的，但我想爭取計算器社會的幫助所以這不走我盯着屏幕要弄清楚的一個小時。非常感謝。

<body> 
    <div id="wrapper"> 
     <div id="banner"> 

      <img src="logo3.png"/> 
      <!--<img src="kslf_logo.png"/> 
      <img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>--> 


      <div id="social_network"> 
       <a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a> 
      </div> 

     </div> 
    </div> 
</body>

這裏是CSS ...

#banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

#banner img { 
    border: none; 
    margin: 0 auto; 
}

來源

2010-01-25 Dan

嘗試圖像的display屬性設置爲block：

banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

banner img { 
    border: none; 
    display: block; 
    margin: 0 auto; 
}

來源

2010-01-25 17:55:15

賓果，謝謝你！ – Dan 2010-01-25 17:56:37

非常歡迎，這是一個非顯而易見的CSS事情。 – 2010-01-25 17:58:03

水平：只是嘗試

text-align:center;

來源

2010-01-25 17:53:06 roman

出於某種原因，我沒有得到在這裏張貼HTML沒有它撕心裂肺它作爲一個頁面，我們對此深感抱歉的竅門，但我認爲這個解決方案僅適用於IE瀏覽器，它不是在這種情況下，反正工作，有沒有一個跨瀏覽器兼容的方式來做到這一點？ – Dan 2010-01-25 17:54:52

@Dan：修正它。你必須用四個空格來表示每個代碼。 – 2010-01-25 17:57:04

要麼

banner { 
    height:100px; 
    text-align:center; 
    width:960px; 
    padding-bottom:10px;}

，或者如果IMG是特定大小的那麼

banner img { 
     display:block; 
     width: <somevalue>px; 
     border:none; 
     margin:0 auto; 
     }

將工作..

來源

2010-01-25 17:53:50

我相信這只是margin: auto;。不需要零。

來源

2010-01-25 17:53:57 Hunter

應用text-align: center到您的橫幅DIV將中心的內聯和inline-block的兒童（其中包括img標籤）。

你的代碼不工作的原因是因爲margin: 0 auto只會居中塊元素。

來源

2010-01-25 17:54:44 nickelleon

許多詳盡嘗試後居中在一個div（垂直和/或水平地）對準的圖像，我理解以下內容。
垂直居中對齊div中的圖像。

.div { 
display:flex; 
justify-content:center 
}

要水平居中對齊div中的圖像。

.div { 
display:flex; 
align-items:center; 
}

要在一個div垂直居中都和水平的圖像，有2個選項（1）

div { 
display:flex; 
align-item:center; 
justify-content:center; 
}

（2）

.div { 
display:flex 
} 

.div > img { 
margin: auto 
}

請讓我知道，如果這在任何情況下都不起作用。

來源

2016-03-30 14:27:46 Malathy

在div中居中放置圖像

回答

相關問題