圖像在html中沒有正確對齊

最後的圖像和文本未正確對齊。下面的代碼：圖像在html中沒有正確對齊

<html> 

<head> 
    <title>PODAR Ahmedabad!</title> 
</head> 


<body bgcolor="BFFFC2"> 
    <div id="main"> 

     <hr size="7"> 

     <div id="header"> 

     <div align="left"> 
     <img src="podar.jpg" width="25%" height="20%"> 
     </div> 

     <h1 align="center"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1> 

     <div align="right"> 
     <img src="school.jpg" width="25%" height="20%"> 
     </div> 

     </div> 

     <hr size="7"> 

    </div> 
</body>

第一圖像的

尺寸爲300 * 105和第二圖像是244 * 244

來源

2015-10-09 hp7

你試過用'float'屬性 –

使用CSS內嵌

<div style="display:inline"> 
    <img src="podar.jpg" width="25%" height="20%"> 
</div> 

<h1 style="display:inline"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1> 

<div style="display:inline"> 
    <img src="school.jpg" width="25%" height="20%"> 
</div>

來源

2015-10-09 10:21:02

這是因爲沒有足夠的空間，所以要麼爲包含3件東西的元素添加空間，要麼讓它們變小。隨着空間，我正在談論寬度。

來源

2015-10-09 10:19:50 Derk

不：不要使用字體標籤..而且必須嵌入字體，在現場; 訪問：https://www.google.com/fonts

例如：增加在陰影頭標記爲光字體： https://fonts.googleapis.com/css?family=Shadows+Into+Light「的rel =‘樣式’類型=」文本/ css'>

<html> 

<head> 
    <title>PODAR Ahmedabad!</title> 
    <style> 
     #main { 
      display: block; 
      width: auto; 
     } 
     .fontPapyrus{ 
      font-family:"Papyrus"; 
     } 
     .fontSize36{ 
      font-size:48px; 
     } 
     .fontBold{ 
      font-weight: bold; 
     } 
     .colorGreen{ 
      color:#34C510; 
     } 
     .fontSketchFlowPrint{ 
      font-familiy:"SketchFlow Print"; 
     } 
     .inlineBlock{ 
      display:inline-block; 
     } 
     .verticalAlignMiddle{ 
      vertical-align: middle; 
     } 
    </style> 
</head> 


<body bgcolor="BFFFC2"> 
<div id="main"> 

    <hr size="7"> 

    <div id="header"> 

     <div class="inlineBlock verticalAlignMiddle"> 
      <img src="podar.jpg" width="25%" height="20%" valign="top"> 
     </div> 

     <h1 align="center" class="inlineBlock verticalAlignMiddle"> 
      <span class="fontSize36 fontPapyrus">Welcome to 
        <span class="fontBold colorGreen fontSketchFlowPrint">PODAR</span> 
      </span> 
      <span class="fontPapyrus">ahmedabad!</span> 
     </h1> 

     <div align="right" class="inlineBlock verticalAlignMiddle"> 
      <img src="school.jpg" width="25%" height="20%" valign="top"> 
     </div> 

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

來源

2015-10-09 11:02:14 AhbapAldirmaz

圖像在html中沒有正確對齊

回答

相關問題