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

This is really some basic html problem, I want to create a small website but I wanted to have my header in the middle of 2 images, my problem basically goes that I cannot get both images to align properly.

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

The result I want is in blue letters and the result I have has black letters, I'm sure this was kinda unneeded but I decided to include it anyway.

我想要的结果是蓝色字母，结果我有黑色字母，我确信这有点不需要，但我决定把它包括在内。

I'm sure, considering I'm a newbie at html/css that I'm doing something wrong over here but basically this is what I have:

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

HTML FILE:

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>

And my CSS FILE:

我的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;
}

Before anything, I tried to do my research but most of the stuff I found wouldn't fix my problem, I've been using w3schools and I've searched a couple of questions here to learn what I know but I seem to have hit a stump cuz I just can't seem to fix this...

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

Thanks in advance.

提前致谢。

5 个解决方案

#1

Set your h1 and images to display: inline-block;

设置你的h1和图像显示：inline-block;

From CSS display: inline vs inline-block

从CSS显示：内联vs内联块

5 个解决方案

#1

更多相关文章

随机推荐