I would like to align the image links to the center of the page. This is what I have tried so far:
HTML:
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a id="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a id="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a id="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
CSS:
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
#profile-link img{
width: 50px;
}
I cannot for the life of me get them to stay in the center of the page evenly spaced under Contact.
Actually you can achieve that using inline-block.
:root{--contact-bg: white}
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
.profile-link{
display: inline-block;/*just add this*/
}
.profile-link img{
width: 50px;
}
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a class="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a class="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a class="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
For some unknown reason I tried to make a gallery using Grid but the footer doesn't show up on this page, I tried on other pages footer works just to find where I'm mistaken?
my HTML and CSS codes:
*{
margin: 0;
align-items: center;
padding: 0 ;
margin-left: auto;
margin-right: auto;
}
/*/****************HEADER/****************/
header img.ab {
width: 35%;
display: block;
text-align: center;
margin-bottom: 25px;
}
header ul {
list-style-type: none;
overflow: hidden;
background-color: #FFA07A;
width: 100%;
text-align: center;
}
header ul li {
display: inline-block;
float: center;
}
header ul li a {
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
li a:hover {
background-color: #1F1300;
}
.photographehead{
text-align: center;
padding-bottom: 100px;
}
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.grid-container {
display: grid;
grid-template-columns: 400px 400px 400px ;
grid-template-rows: 200px 200px 200px 200px ;
grid-gap: 2px;
justify-content: center;
z-index: -999;
}
div img.sadlife{
float: left;
width: 400px;
height: 200px;
object-fit: cover;
padding: 10px;
border-radius: 25px;
}
.grid-container > div {
text-align: center;
padding: 10px 0;
padding-bottom: 200px;
font-size: 30px;
}
.lightbox {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lightbox:target {
display: block;
}
.lightbox span {
display: block;
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
footer.graphfooter{
clear: both;
position: relative;
height: 300px;
margin-top: -10px;
background-color:#A2B29F ;
text-align: center;
line-height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Salah Eddine Laouina</title>
<link rel="stylesheet" type="text/css" href="stylephotographe.css">
</head>
<body>
<header>
<img class="ab"src="logo.png">
<nav>
<ul>
<li> ACCUEIL</li>
<li> OEUVRES</li>
<li> MAKING OF</li>
<li> PRESS AND MEDIA</li>
<li> PHOTOGRAPHIE</li>
<li> CONTACT</li>
</ul>
</nav>
</header>
<div class="photographehead">
<h2 style="margin-top: 10px;">BORN TO SHOOT THE WORLD AROUND ME</h2>
<h6>Artist photographe Marocain</h6>
<br>
<hr>
<p>"La photographie est un instant qui se reflechit pas, suspendue à une fraction de seconds qui laisse à réfléchir."</p>
<address class="author">-Rémy Donnadieu</address>
<br>
<h3> SALAH EDDINE LAOUINA ARTISTE PHOTOFRAPHE MAROCAIN </h3>
</div>
<div class="grid-container">
<div><a href="#p1">
<img class="sadlife" src="photographie/photo1.jpg">
</a>
<a href="#" class="lightbox" id="p1">
<span style="background-image: url('photographie/photo1.jpg')"></span>
</div>
<div><a href="#p2">
<img class="sadlife" src="photographie/photo2.jpg">
</a>
<a href="#" class="lightbox" id="p2">
<span style="background-image: url('photographie/photo2.jpg')"></span>
</div>
<div><a href="#p3">
<img class="sadlife" src="photographie/photo3.jpg">
</a>
<a href="#" class="lightbox" id="p3">
<span style="background-image: url('photographie/photo3.jpg')"></span>
</div>
<div><a href="#p4">
<img class="sadlife" src="photographie/photo4.jpg">
</a>
<a href="#" class="lightbox" id="p4">
<span style="background-image: url('photographie/photo4.jpg')"></span>
</div>
<div><a href="#p5">
<img class="sadlife" src="photographie/photo5.jpg">
</a>
<a href="#" class="lightbox" id="p5">
<span style="background-image: url('photographie/photo5.jpg')"></span>
</div>
<div><a href="#p6">
<img class="sadlife" src="photographie/photo6.jpg">
</a>
<a href="#" class="lightbox" id="p6">
<span style="background-image: url('photographie/photo6.jpg')"></span>
</div>
<div><a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
<div><a href="#p8">
<img class="sadlife" src="photographie/photo8.jpg">
</a>
<a href="#" class="lightbox" id="p8">
<span style="background-image: url('photographie/photo8.jpg')"></span>
</div>
<div><a href="#p9">
<img class="sadlife" src="photographie/photo9.jpg">
</a>
<a href="#" class="lightbox" id="p9">
<span style="background-image: url('photographie/photo9.jpg')"></span>
</div>
<div><a href="#p10">
<img class="sadlife" src="photographie/photo10.jpg">
</a>
<a href="#" class="lightbox" id="p10">
<span style="background-image: url('photographie/photo10.jpg')"></span>
</div>
</div>
<footer class="graphfooter" >
<figure>
<img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%">
<figcaption><span>S.LAOUINA</span></figcaption>
<p>SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN</p>
<p>Copyright 2020 © LAOUINA</p>
</div>
</figure>
</footer>
</body>
</html>
The problem is in some of your anchors ("<a>") in your HTML.
Some of them are not closed, like , for example:
<div>
<a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
Look that the second anchor (id="p7") was left open (without close tag ). Leave tags unclosed can mess with all your document structure.
That problem was repeated in some tags of your HTML. Use a good code editor like VSCode to avoid that kind of error.
The link below is of a codepen with your HTML fixed. You can use a file compare tool like winmarge to see what I've changed.
https://codepen.io/niconeves/pen/ExXdRBG
I have created a landing page for a SharePoint site with graphics. I have noticed that when resizing the browser window to that of something like a tablet or mobile device, the page/graphics aren't responsive and adjusting to the sizing.
I came across a few posts in relation to my issue, but none were very helpful.
Here is my HTML/CSS:
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<head>
<h1><strong>G3G Controls</strong></h1>
</head>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
You have used flexboxes that was enough to make stuff responsive the property you were lacking was setting a flex-wrap:wrap for the .center class which will let the images wrap to the next line as soon as the width of the container element reduces.
AlsoThe .img_container for the images was creating an issue due to its width:70% and it also needs to be set to display:flex which will allow these images to accommodate side by side as you want. I also changed The container element .center width to 100%.
The Proposed Code
html, body {
margin: 0;
height: 100%;
}
.img_container {
display:flex;
border: none;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 100%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
width:100%;
display: flex;
justify-content:center;
flex-wrap:wrap;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<h1>The Topic</h1>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
One Important thing - In your code snippet in the HTML you have declared a <h1> heading at the top inside a <head> tag. Pls don't do this <head> tag is always used outside the <body> element that too to declare meta data which doesn't supposed to be visible in the browser. Their are other semantic tags to use inside the <body> element and I think you might have got confused with <header> tag which can be used inside the <body> element.
Do tell me whether I was of any Help :)
I already figured out how to keep the footer at the bottom of the other pages of the website I am trying to develop. But I can't figure out how to do it on my page with a photo gallery. The footer stays in the middle of the page. :(
Here is my HTML code for that page:
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
min-height: 100%;
position:relative;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
position: absolute;
bottom:0;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
height: auto;
width: 45%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</div>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
}
.content{
width:100%;
display:block;
}
#wrapper {
margin: 0;
padding: 0;
width:100%;
display: block;
}
.content{
display: block;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
display:block;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
width:100%;
}
#gallery li {
display: inline-block;
height: auto;
width: 40%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<div class="content">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
</div>
</div>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</body>
I found that if you make the ul#gallery have a property of display:inline-block; it will give the gallery a physical height (because at the moment my browser says the height is zero) and push the footer to the bottom.
I am trying to align three divs across my page with one always staying center and the others of equal spacing apart. I have what I think is most of the code I need I just cant seem to get the spacing to work.
#Partnerships div {
height: 600px;
width: 100%;
margin-left: 10px;
margin-top: 10px;
Padding: 10px;
float: left;
background-color: #000000;
color:#FFFFFF;
border-radius: 15px 15px 15px 15px;
}
#Robe
{float:left;
width:100px;}
#Avolites
{float:right;
width:100px;}
#UKProductions
{margin:0 auto;
width:100px;}
<div id="Partnerships div">
<div id="Robe">
<h1>Robe</h1>
<p></p>
<a href="http://www.robe.cz/" target="_blank">
<img src="" alt="RobeLogo" height="100" width="200" >
</a>
</div>
<div id="Avolites">
<h1>Avolites</h1>
<p></p>
<a href="" target="_blank">
<img src="" alt="AvolitesLogo" height="100" width="200">
</a>
</div>
<div id="UKProductions">
<h1>UkProductions</h1>
<p></p>
<a href="" target="_blank">
<img src="" alt="UkProductionsLogo" height="100" width="200">
</a>
</div>
You can use this example as a guide for your solution:
Flexbox takes care of the alignment horizontally.
#Partnerships {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background-color: lightgrey;
}
#Partnerships div {
background-color: cornflowerblue;
width: 300px;
margin: 10px;
}
<div id="Partnerships">
<div id="Robe">
<h1>Robe</h1>
<a href="http://www.robe.cz/" target="_blank">
<img src="" alt="RobeLogo" height="100" width="200" >
</a>
</div>
<div id="Avolites">
<h1>Avolites</h1>
<a href="" target="_blank">
<img src="" alt="AvolitesLogo" height="100" width="200">
</a>
</div>
<div id="UKProductions">
<h1>UkProductions</h1>
<a href="" target="_blank">
<img src="" alt="UkProductionsLogo" height="100" width="200">
</a>
</div>
</div>
Add this to these code:
#Robe, #Avolites {
display: block;
}
#UKProductions {
display: inline-block;
}
#Partnerships {
text-align: center;
}
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}