图像在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中没有正确对齐

回答

相关问题