Html 如何在页脚中将两个图标（图像）并排居中？_Html_Css

Html 如何在页脚中将两个图标（图像）并排居中？

html css

Html 如何在页脚中将两个图标（图像）并排居中？,html,css,Html,Css,我即将完成主页的最后一部分。。。页脚我想知道我如何能浮动两个图标（图像）彼此相邻？指的是并排的两个图标。我理解悬停，我只需要知道如何相应地定位它们谢谢 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aesthetic Media</title> <link href="styles.css" rel="stylesheet" ty

我即将完成主页的最后一部分。。。页脚

我想知道我如何能浮动两个图标（图像）彼此相邻？指的是并排的两个图标。我理解悬停，我只需要知道如何相应地定位它们

谢谢

HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500'  rel='stylesheet' type='text/css'>
<script type="text/javascript" src="styles.js"></script>
</head>

<body>

<header>

    <a class="logo" href="main.html">Aesthetic</a>

    <nav>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
            </nav>

    <div class="clears"></div>

    <div class="maintext">

        <h1>We're Aesthetic</h1>
        <h2>A Visual Agency from Niagara</h2>

    </div>

</header>

<main>

   <h2 class="whatwedo">Expertise</h2>
  <div class="whatwedobox one"><div class="branding"><img src="images/branding.png" class="branding"><h3>Branding</h3></br><p>Are you looking for the competitive edge that will boost your business ahead of others? Look no further then Aesthetic... We're here to help.</p></div></div>
   <div class="whatwedobox two"><div class="motion"><img src="images/motion.png" class="motion"><h3>Motion</h3></br><p>No matter the message you're trying to convey, we at Aesthetic will transform your idea, creating an incredible and memorable audio visual experience.</p></div></div>
    <div class="whatwedobox three"><div class="design"><img src="images/design.png" class="branding"><h3>Design</h3></br><p>Our talented team, here at Aesthetic is ready to help take your business to the sky! If you're looking for a professional, user friendly and beautifully designed website, just let us know!</p></div></div>

</main>

<div class="secondary">

    <h2>We bring out the beauty in anything and everything.</h2>
    <h3>Aesthetic Media</h3>

</div>

<footer>

    <a class="logotwo" href="main.html">Aes</a>

        <nav>
            <li><a href="#" class="facebook" title="Facebook Page"></a></li>
            <li><a href="#" class="Mail" title="Contact Us!"></a></li>
        </nav>

</footer>

<script     src="https://ajax.googleapis.com/ajax/libsLorem/jquery/1.11.2/jquery.min.js">  </script>

</body>
</html>

您能否创建两个分区，每个分区的宽度为49%，然后在每个分区中居中放置一个图像

<div id=footer style="width:80%; margin:auto; background-color:rgb(50,50,50);">
    <div style="display:inline-block; width:49%">
        <p style="text-align:center">
            <img src="facebook.png">
        </p>
    </div>
    <div style="display:inline-block; width:49%">
        <p style="text-align:center">
            <img src="youtube.png">
        </p>
    </div>
</div>

能否创建两个宽度为49%的分区，然后在每个分区中居中放置一个图像

<div id=footer style="width:80%; margin:auto; background-color:rgb(50,50,50);">
    <div style="display:inline-block; width:49%">
        <p style="text-align:center">
            <img src="facebook.png">
        </p>
    </div>
    <div style="display:inline-block; width:49%">
        <p style="text-align:center">
            <img src="youtube.png">
        </p>
    </div>
</div>

您不需要

，只需将内联块应用于需要对齐的元素（div、img等）：

<div style="display:inline-block;">
    <a href="#" class="facebook" title="Facebook Page">Facebook</a>
</div>
<div style="display:inline-block;">
    <a href="#" class="Mail" title="Contact Us!">Mail</a>
</div>

如果您不只是希望两个链接/图像对齐，可能需要额外的样式，您没有解释太多：）

查看此问题以了解。

您不需要

，只需将内联块应用于需要对齐的元素（div、img等）：

<div style="display:inline-block;">
    <a href="#" class="facebook" title="Facebook Page">Facebook</a>
</div>
<div style="display:inline-block;">
    <a href="#" class="Mail" title="Contact Us!">Mail</a>
</div>

如果您不只是希望两个链接/图像对齐，可能需要额外的样式，您没有解释太多：）

看看这个问题。

是的，还添加了

display:inline

我现在有点慌乱lol。。。我已经做了好几个小时了。如果可能的话，你能把我的代码编辑一下以供参考吗？是的，同时添加

display:inline

我现在有点慌乱lol。。。我已经做了好几个小时了。如果可能的话，你能把我的代码编辑一下作为参考吗？那太好了！内联块意味着它们将水平对齐？我可以使用顶部和右侧来定位它们吗？因为它们将在页脚中浮动。我的徽标在页脚左侧浮动。我希望它们水平对齐：）谢谢<代码>内联块将它们并排并垂直对齐，要水平对齐，它们应该相互重叠，我想我们需要一张图：）出现的唯一图像是facebook的图像。。邮件图像在哪里都找不到。。我在命名方面正确地插入了它们，所以我不知道..两个选项：1-图像不在该url处2-图像被css类隐藏。MailYou在css中有

.mail

，应该是

.mail

，因此图像没有显示。除此之外，不要再添加另一个显示：如果你已经在css中有了它，top:maybe不需要，position:absolute也不需要。那太好了！内联块意味着它们将水平对齐？我可以使用顶部和右侧来定位它们吗？因为它们将在页脚中浮动。我的徽标在页脚左侧浮动。我希望它们水平对齐：）谢谢<代码>内联块将它们并排并垂直对齐，要水平对齐，它们应该相互重叠，我想我们需要一张图：）出现的唯一图像是facebook的图像。。邮件图像在哪里都找不到。。我在命名方面正确地插入了它们，所以我不知道..两个选项：1-图像不在该url处2-图像被css类隐藏。MailYou在css中有

.mail

，应该是

.mail

，因此图像没有显示。除此之外，不要再添加另一个显示：如果您已经在css中有了它，那么top:maybe不需要，position:absolute也不需要。