How do you centre two icons (images) side by side in footer?


Tags: html,css

Problem :

I'm close to completing the last section of my main page... the footer.

I'm wondering how I can float two icons (images) next to each other? Referring to the two icon side by side. I understand the hover I just need to know how to position them accordingly.

Thankyou!

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>

CSS

* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

body {
background: white;
}

header {
width: 100%;
height: 550px;
background: white;
background: url('images/main.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}

.logo {
top: 33px;
left: 30px;
width: 200px;
height: 80px;
display: block;
float: left;
z-index: 30;
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
position: absolute;
}

.logo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}

nav {
top: 22px;
right: 30px;
float: right;
z-index: 30;
letter-spacing: .2em;
position: absolute;
}

nav li {
float: left;
list-style: none;
padding: 10px 15px 10px 15px;
}

nav li:last-child {
 border-right: none;
}

nav li a {
padding: 5px 10px 5px 10px;
color: white;
display: block;
font-weight: 400;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}

nav li a:hover {
background-color: rgba(0, 0, 0, 0.5);
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}

.clears {
clear: both;
}

.maintext {
margin: auto;
width: 600px;
text-align: center;
margin-top: 185px;
color: white;
z-index: 30;
position: relative;
}

.maintext h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

.maintext h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

main {
max-width: 1180px;
margin: auto;
margin-top: 50px;
overflow: hidden;
}


h2.whatwedo {
text-align: center;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased;
}

.motion img {
max-width: 45%;
min-width: 45%;
height: 150px;
margin-left: 89px;
}

.branding img {
maxwidth: 50%;
height: 150px;
margin-left: 100px;
}

.design img {
width: 42%;
height: 138px;
margin-left: 85px;
margin-top: 13px;
}

.whatwedobox {
width: 30%;
height: 350px;
border: none;
float: left;
margin-right: 5%;
padding: 15px;
margin-top: 20px;
margin-bottom: 15px;
}

.whatwedobox:last-child {
margin-right: 0%;
}

main h3 {
text-align: center;
padding-top: 20px;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased; 
}

main p {
text-align: center;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased; 
}

.secondary {
width: 100%;
height: 200px;
margin-top: 20px;
background: white;
background: url('images/sky.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}

.secondary h2 {
margin: 0 200px;
margin-top: 3px;
margin-bottom: 17px;
height: 90px;
width: 500px;
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

.secondary h3 {
margin: 0 auto;
height: 50px;
width: 320px;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
background: rgba(0, 0, 0, 0.3);
padding: 10px; 
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
}

footer {
width: 100%;
height: 150px;
margin-top: 75px;
background: rgba(0, 0, 0, 0.8);
position: relative;

}

.logotwo {
top: 60px;
left: 150px;
width: 100px;
height: 40px;
display: block;
float: left;
z-index: 30;
font-size: 2em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 9px;
position: absolute;
}

.logotwo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
margin: 10px 10px 10px 10px;
-webkit-font-smoothing: antialiased;
background: rgba(0, 0, 0, 0.3);
padding: 10px; 
}

.facebook {
top: 22px;
right: 70px;
width: 64px;
height: 64px;
float: right;
z-index: 30;
display: block;
background: url('images/fb.png') center top no-repeat;
letter-spacing: .2em;
position: absolute;
}

.facebook:hover {
background-image: url('#');
}

.mail {
top: 22px;
right: 30px;
width: 64px;
height: 64px;
float: left;
z-index: 30;
display: inline-block;
background: url('images/email.png') center top no-repeat;
letter-spacing: .2em;
position: absolute;
}

.mail:hover {
background-image: url('#');
}


Solution :

Can you create 2 div of 49% width each, and then center one image in each div ?

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

    CSS Howto..

    How to get html data-attribute value in css regular expressions

    How to stop css inheritance in sub unorder list

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to target last TD cell?

    I am wondering how js fiddle is handling their textareas concerning resizing and their layot

    How to Fix this CSS and Center the Menu Horizontally?

    Messed up slides in custom minimal JS/CSS slideshow

    How to remove a css class using jquery in a certain screen size

    How to style this value with jQuery

    How to create a sphere in css?

    How to make Bootstrap container auto for height?

    how to put an image upon a image in a li which (on hover) changes its z-index

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to add custom fonts [duplicate]

    How to apply :hover on :after to certain div in CSS

    How to ignore white spaces in between tags, CSS, PHP

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How can I toggle between multiple .css with jquery?

    css - How to make the view window grows while the user zooms in?

    How do I get an object from d3.data()?

    how to use two css style in a div or span

    how to rotate text with css? transform is not supported by current schema?

    How to Find CSS Selector

    How to stack and hide images in a Div in order to animate between them (without floats)

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    How to fill a text with color using CSS?

    R shiny: How to change the width of a progress-bar

    How to generate image background that flips with each duplication in css? [duplicate]

    how to make this fit in same line in css

    How to use css in asp.net for web server control?