HTML – 我似乎无法正确对齐这些图像

这真的是一些基本的html问题,我想创建一个小网站,但我想在2个图像中间有我的标题,我的问题基本上是我无法让两个图像正确对齐.

The result I want is in blue letters and the result I have has black letters,我确定这有点不需要,但无论如何我决定把它包括在内.

我敢肯定,考虑到我是html / css的新手,我在这里做错了,但基本上这就是我所拥有的:

HTML文件:

    <!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Conversor de Coordenadas</title>
        <script src="conversor.js"></script>
        <link rel="stylesheet" href="conversor.css">
    </head>

    <body><center>

           <br>
                <div class="box"> <img id="globe1" src="globe.gif"/> <h1> Conversor de Coordenadas </h1> <img id="globe2" src="globe.gif"/></div>

                <br>    
                    <div id="background" style="background-image: url(worldmap.gif); height: 400px; width: 520px; "></div>              
                    <p><input type="button">
                    <br>
     </center>
    </body>
</html>

我的CSS文件:

#globe1 {
   float: left;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
}

#globe2 {
   float: right;
    margin: 0px 0px 15px 20px;
    height: 100px;
    width: 100px;
   margin: 0px 0px 15px 20px;
}


.box {

    width:  1000px;
}

在此之前,我试图做我的研究,但我找到的大多数东西都不能解决我的问题,我一直在使用w3schools,我在这里搜索了几个问题,以了解我所知道但我似乎已经打了一个树桩因为我似乎无法解决这个问题……

提前致谢.

最佳答案 设置你的h1和图像显示:inline-block;

《HTML – 我似乎无法正确对齐这些图像》

CSS display: inline vs inline-block开始

点赞