圖片在html中未正確對齊

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

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

<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 個解決方案

解決方案1
2 已采納 2015-10-09 10:21:02

解決方案2
1 2015-10-09 11:02:14

解決方案3
0 2015-10-09 10:19:50

圖片在html中未正確對齊

問題描述

3 個解決方案

解決方案1 2 已采納 2015-10-09 10:21:02

解決方案2 1 2015-10-09 11:02:14

解決方案3 0 2015-10-09 10:19:50

解決方案1
2 已采納 2015-10-09 10:21:02

解決方案2
1 2015-10-09 11:02:14

解決方案3
0 2015-10-09 10:19:50