圖片不會居中，只能對齊左側或右側

我無法讓我的圖片在我的< h1>下居中。如果我嘗試浮動：左側，那麼它就會對齊到最左側。如果我嘗試正確，它的確如此。但中心只停留在左側。圖片不會居中，只能對齊左側或右側

CSS

.b { 
      color: blue;} 
    .r { 
      color: red;} 
    .key { 
      border-style: groove; 
      width:75px;} 
    .centre { 
      text-align:center;} 









<h1 class="main"><ul>Amsterdam Itinerary</ul></h1> 

img src="*img*" alt="dam" width="140" height="100" style="float:center"/> 

    <div class="key centre">Key:<br><br> 
    <span class="b">Matt <br> </span> 
    <span class="r">Kerry <br> </span> 
    Both <br> 
    </div>

來源

2014-10-03 user2974706

你想要什麼爲中心？看這個例子http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align – Elric 2014-10-03 16:06:04

如果你想讓它實際上是你的H1下對齊，那麼你將還需要中心您H1並將其包裝在一個容器格中。

<style> 
    .b {color: blue;} 
    .r {color: red;} 
    .key { 
     border-style: groove; 
     width:75px; 
    } 
    img.centre { 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .centre {text-align:center;} 
    .container{width:350px;} 
</style> 
<div class="container"> 
    <h1 class="main centre">Amsterdam Itinerary</h1> 
    <img class="centre" src="img-source" alt="dam" width="140" height="100" /> 

    <div class="key centre">Key:<br><br> 
     <span class="b">Matt <br> </span> 
     <span class="r">Kerry <br> </span> 
     Both <br> 
    </div> 
</div>

如果您只是想讓圖像居中，那麼您可以使用img.centre樣式。

img.centre { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

您可以在這裏嘗試一下：http://jsfiddle.net/gzvehb9y/

來源

2014-10-03 16:22:27 JoeyZero

圖片的刪除浮動風格。使用餘量：0自動;代替;

來源

2014-10-03 16:08:32 Vis

取出IMG的float並在一個div包裹，並給那個div的，下面的CSS：

text-align: center;

來源

2014-10-03 16:20:09

圖片不會居中，只能對齊左側或右側

回答

相關問題