AJ Online AJ Online - 15 days ago 5
CSS Question

Best method to aliging footer?

trying to align my images and text to be on one side and one line, what would be the best method to do this? would I need to make a grid? i have tried the align methods but its not getting the results i expected, any tips to where I am going wrong ? thanks

here is an imgur of what I am trying to achieve
http://imgur.com/a/Jdrw3

https://jsfiddle.net/jygbq0e8/


HTML


<!DOCTYPE html>
<html>
<head>
<title> Referenzen </title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div class="container">
<h1 align="center">
<a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>
<div class="menu_div">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Bewerber</a>
<div class="dropdown-content">
<a href="info.html">Info</a>
<a href="jobs.html">Jobs</a>
</div>
</li>
<li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
<div class="dropdown-content">
<a href="personalverleih.html">Personalverleih</a>
<a href="toolrental.html">Werkzeuge Mieten</a>
<a href="referenzen.html">Referenzen</a>
<a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</li>
</div>
<div class="fadein">
<img src="welder1.png">
<img src="welder1.png">
<img src="welder1.png">
</div>

<h2><font color="#004b77">Referenzen</font></h2>
<p>Wir danken unser langjähriger Kundschaft sehr für die vertrauen an unser Dienstleistungen und hier eine Auswahl der Beteiligte Projekt bis und mit 2016
<font color="#004b77"><b>Toni-Areal</b></font> - Zürich, <font color="#004b77"><b>Nespresso</b></font> - Romont, <font color="#004b77"><b>Salle de spectacle Arena</b></font> - Genève, <font color="#004b77"><b>Nostromanlage Krenkraftwerk</b></font> - Beznau, <font color="#004b77"><b>Roche</b></font>- Turm ( Bau 1 ) – Basel, <font color="#004b77"><b>SIG Les Cheneviers</b></font> – Aire-la-Ville, <font color="#004b77"><b>IWB Fernheizungsnetz</b></font>– Basel, <font color="#004b77"><b>BASF-Pharma SA Betreibsunterhalt</b></font> – Evionnaz, <font color="#004b77"><b>Novartis Campus</b></font>– Basel, <font color="#004b77"><b>Coop LoBOS Pratteln+Halba</b></font> – Pratteln, <font color="#004b77"><b>Novartis Bau 222 NSLF</b></font> – Stein (AG), <font color="#004b77"><b>Biozentrum</b></font> – Basel, <font color="#004b77"><b>Infrapark Baselland AG Betreibsunterhalt</b></font> – Muttenz, <font color="#004b77"><b>Galliker Transport AG Logistikcenter</b></font> – Dagmersellen, <font color="#004b77"><b>KVA Renergia</b></font> – Luzern, <font color="#004b77"><b>Nestlé Fabrik</b></font> – Konolfingen, <font color="#004b77"><b>Roche Basel Bau 50,67,91</b></font> – Basel, <font color="#004b77"><b>Nant de Drance</b></font> - Finhaut, <font color="#004b77"><b>Vierfeld</b></font> – Pratteln,<font color="#004b77"><b>Holzwärmeverbund Fernheizungsnetz</b></font> - Menzingen, <font color="#004b77"><b>Novartis Bau 503,506</b></font> - Basel, <font color="#004b77"><b>EMS Chemie AG Betreibsunterhalt</b></font> - Domat/Ems, <font color="#004b77"><b>Emmi Areal</b></font> - Luzern,<font color="#004b77"><b>SBB Olten</b></font> – Olten, <font color="#004b77"><b>CSCS Swiss National Supercomputing Centre</b></font> – Lugano, <font color="#004b77"><b>Endress+Hauser AG</b></font> – Reinach BL, <font color="#004b77"><b>Lonza AG Betreibsunterhalt</b></font> – Visp, <font color="#004b77"><b>Tamoil SA</b></font> – Collombey, SIG Fernwärmenetz – Genève, ARA Bern</font> – Bern, <font color="#004b77">Emmi Milch AG</font> - Dagmersellen, <font color="#004b77"><b>Konapharma AG</b></font> – Pratteln, <font color="#004b77"><b>CHUV - Centre hospitalier universitaire vaudois</b></font> – Lausanne, <font color="#004b77"><b>Rolex</b></font> – Biel, <font color="#004b77"><b>Swatch Group</b></font> – Boncourt,<font color="#004b77"><b>ELSA-MIFROMA</b></font> - Estavayer-le-Lac, <font color="#004b77"><b>General Electric (Switzerland) GmbH</b></font> – Birr, <font color="#004b77"><b>BIOGEN</b></font>- Lutterbach
</p>

<ul class="thumbnails">
<li><img src="alpiq.png.gif" /></li>
<li><img src="General_Electric_logo.svg.png" /></li>
<li><img src="bacher_logo.gif" /></li>
<li><img src="basf_logo.png" /></li>
<li><img src="bilfinger_logo.png" /></li>
<li><img src="bwt_logo.jpg" /></li>
<li><img src="caliqua_logo.gif" /></li>
<li><img src="cofely.png.png" /></li>
<li><img src="despraz_logo.GIF" /></li>
<li><img src="halg_logo.jpg" /></li>
<li><img src="hitachi.png" /></li>
<li><img src="iwbfacebook_logo_180_180.png" /></li>
<li><img src="jc.png.png" /></li>
<li><img src="josef_meyer_logo.png" /></li>
<li><img src="kelag_systems_logo.jpg" /></li>
<li><img src="klima_ag.jpg" /></li>
<li><img src="lauber.png.jpg" /></li>
<li><img src="lehman.png.png" /></li>
<li><img src="lonza.png.jpg" /></li>
<li><img src="rosenmund.png.jpg" /></li>
<li><img src="sotta.png.png" /></li>
<li><img src="tetra_pack_logo.png" /></li>
<li><img src="trinox_ag.png" /></li>
<li><img src="voith.png.jpg" /></li>
<li><img src="zwahlen_mayr_sa_logo.png" /></li>
<li><img src="Biogen_Logo_Standard_0.png" /></li>
<li><img src="logo-elsa-mifroma.png" /></li>
<li><img src="sbb.png" /></li>
<li><img src="nestle-2.png" /></li>
<li><img src="Roche_Logo.svg.png" /></li>
</ul>
<footer>
<div class="wrapper"></div>
<p align="left"><font color="#fff">Copyright © A.Willi A.G</font></p>
<p algin="left"><font color="#fff">t +41 (0)79 322 14 20</font></p>
<p algin="left"><font color="#fff">Wasgenring 94, CH-4055 Basel</font></p>
<p algin="left"><font color="#fff">support@awilli-ag.ch</font></p>
<img src="phone_icon.gif" algin="left">
<img src="mail_icon.png" algin="left">
<img src="dossier_icon.png" algin="left">
<img src="location_icon.png" algin="left">
<img src="" algin="left">
<img src="swiss.png" algin="center" alt="Swiss Staffing"/>
</div>
</footer>
</div>
</body>
</html>



CSS


body { font-family: verdana; background:white ; color: black; }


}

.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}

.fadein { position:absolute; height:500px; width:49px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }

.menu_div {
position: relative;
z-index: 0;
height: 2.9em;
margin-bottom: -0.4em;
margin-top: 0em;
z-index:1000;
background-color: #333


}
.fadein {
position: relative;
z-index: 3;
background: ;
width: 100%;
left: -0.5px;
top: 0em;


}

.fadein img{
margin:0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 400%;
}




.tech-slideshow {
height: 200px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
height: 100px;
width: 100px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
opacity: 1;
}

@keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}


form {
background-color: #f7f7f7;
border: 2px solid #CCCCCC;

/* Just to center the form on the page */
margin: auto;
width: auto;
height: auto;

/* To see the limits of the form */
padding: 10em;
}

div + div {
margin-top: 0.3em;
}

label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 170px;
text-align: left;
}

input, textarea {
/* To make sure that all text field have the same font settings
By default, textarea are set with a monospace font */
font: 1em verdana;

/* To give the same size to all text field */
width: 200px;

-moz-box-sizing: border-box;
box-sizing: border-box;

/* To harmonize the look & feel of text field border */
border: 2px solid ;
}

input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: black;
}

textarea {
/* To properly align multiline text field with their label */
vertical-align: top

/* To give enough room to type some text */
height: 23em;

/* To allow users to resize any textarea vertically
It works only on Chrome, Firefox and Safari */
resize: vertical;
}

.button {
/* To position the buttons to the same position of the text fields */
padding-left: 400px; /* same size as the label elements */
}

button {
/* This extra magin represent the same space as the space between
the labels and their text fields */
margin-left: 2em;
}

.container {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}

.image-upload > input
{
display: none;
}

.image-upload img
{
width: 70px;
cursor: pointer;

}



.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
border: -0.2px solid #CCCCCC;
}

.flex-container > * {
padding: 150px;
-webkit-flex: 1 110%;
flex: 1 100%;
height: 40px;
border: 4px solid #CCCCCC;
width: 400px;
height: 50px;
font-size:14pt;
}

.article {
text-align: left;
height: 200px;
margin-bottom:11px
}

header {
background: white;color:black;
font-size: 0.9em;
}





@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}



.indexinfo {

padding:70px;
-webkit-flex: 1 100%;
flex: 1 110%;
height: 70px;
border: px solid black;
height: 200px:
text: center;

}

.sidebar-image-gallery {

height: 700px;
width: 1323px;

}


display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.thumbnails {
overflow: hidden;
}
.thumbnails li {
float: center;
width: 10%;
position: relative;
padding: 40px;
min-height: 100px;
background-color: #fff;
border: px solid #ccc;
overflow: hidden;
}
.thumbnails li img {
max-width: 100%;
display: block;
position: absolute;
max-height: 100px;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}

footer {
display: block;
width: 100%;
background-color: #222;
padding: 60px 0px;
font-size: 20px;
color: white
{background-position: 50% 90%;}
}

Guy Guy
Answer

You can solve this easily by using Flexbox and its align-items property. Here's a quick example:

.info {
  display: flex;
  align-items: center;
}

.info-img {
  width: 25px;
  height: 25px;
}

p {
  margin: 0;
}
<div class="info">
    <img class="info-img"  src="https://maxcdn.icons8.com/iOS7/PNG/25/Maps/location_filled-25.png" title="Marker Filled" width="25">
    <div class="info-text">
      <p>21 Revolution Street</p>
      <p>Paris, France</p>
    </div>
</div>

Comments