標題中的中心圖像

我現在正在基礎框架中進行編程。但我不明白爲什麼在黃色菜單欄中的圖片是左對齊的？我希望圖片能夠居中。我已經嘗試了文檔中的所有內容，但這不適合我。有人有其他建議嗎？標題中的中心圖像

<body> 
    <table class="body"> 
    <tr> 
     <td class="center" align="center" valign="top"> 
     <center> 

      <table class="row" style="background-color:yellow;"> 
      <tr> 
      <td class="center" align="center"> 
      <center> 
       <table class="container"> 
       <tr> 
        <td class="wrapper last"> 
        <table class="twelve columns"> 
         <tr> 
         <td> 
          <img width="250" height="80" src="http://placehold.it/580x300"> 
         </td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </center> 
      </td> 
     </tr> 
     </table> 
     <br> 

     <table class="container"> 
     <tr> 
      <td> 
      <!-- content start --> 
      <table class="row"> 
       <tr> 
       <td class="wrapper last"> 
        <table class="twelve columns"> 
        <tr> 
         <td> 
         <h1>Hi, Elijah Baily</h1> 
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> 
         <img width="580" height="300" src="http://placehold.it/580x300"> 

         </td> 
         <td class="expander"></td> 
        </tr> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
     </center> 
    </td> 
    </tr> 
</table>

來源

2017-01-31 Ne Kr

在您的網站爲例，用戶body, table.body, h1, h2, h3, h4, h5, h6, p, td財產text-align:left。並從你的img類中擺脫display: block; float: left;。

請注意，如果您將製作text-align:center它將影響整個表單。所以再爲它製作一個課。

來源

2017-01-31 08:09:49 Minksmnm

@Ne Kr其工作。移除'img {display：block; float：left; }''您的''元素和上面的''上面加上'text-align：center' – Minksmnm

工作，謝謝:-) –

看你的網站例如，<img>元素具有以下樣式：

img { 
    display: block; 
    float: left; 
}

這兩種風格是造成行爲。首先，display: block使圖像元素佔據其容器的全部寬度，即使圖像本身沒有。其次，float: left將圖像移動到其容器的左側。

刪除這兩種樣式，圖像將居中。

來源

2017-01-31 08:03:52

謝謝你的評論。我試圖刪除'/ * img.center {margin：0 auto; float：none; } * /'，但圖片仍然左對齊。我現在就要上傳新的代碼，到我在問題 –

中給出的地址。您還必須刪除'display：block'樣式。當您上傳新代碼時請通知我 –

只需從包含徽標的徽標頭部分中移除「十二列」類，該徽標將以徽標爲中心。 – Rahul

您應該添加一個類爲「topImage」的形象和下面的CSS添加到您的css文件：

.topImage { 
    float: none; 
    margin: 0 auto; 
}

來源

2017-01-31 08:09:34

剛剛嘗試過，它沒有做任何事 –

拉胡爾的答案應該工作。刪除'十二列'班，並沒有增加'容器'班 –

從這個css刪除寬度部分：

table.container { 
    /*width: 580px;*/ 
    margin: 0 auto; 
    text-align: inherit; 
}

來源

2017-01-31 08:14:32 Rahul

什麼都不做： -/http://vouzalis.com/template -test.html –

更新了答案。它現在應該工作。 – Rahul

標題中的中心圖像

回答

相關問題