Question

最后的图像和文字没有正确对齐。这是代码：

<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

Answer 1

使用css inline

<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>

Answer 2

不：不要使用字体标签..并且必须在网站中嵌入字体; 访问：https://www.google.com/fonts

示例：为Shadows Into Light字体添加头标记： https://fonts.googleapis.com/css?family=Shadows+Into+Light'rel ='stylesheet'type ='text / css'＆gt;

<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>

Answer 3

这是因为没有足够的空间，所以要么为包含3个东西的元素添加空间，要么使它们变小。有空间我说的是宽度。

图像未在html中正确对齐

3 个答案: