CODEWITHSUNDEEP
htmlcss
saperlipopette
saperlipopette

Reputation: 177

Align and center images in a fixed div

i have a very simple page with a fixed footer. On this footer, i'd like to place 5 images centered with equals distances between them.

Here is my HTML/CSS :
Footer div :

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 9%;
    background-color: pink;
}

And the HTML : 

<div class="fixed">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
</div>

Here is what i obtain :

screenshot of mobile browser display

I would like to display the red icons at the center. It should be responsive depending on the display resolution with the use of '%' values. I thought about doing a grid in the footer. But is there an easier way to do it ? Couldn't find anything about this on the web, hope it's not a duplicate ! Thank you in advance for any help !

Upvotes: 5

Views: 3924

Answers (5)

Jagajit Prusty
Jagajit Prusty

Reputation: 2110

you can use flexbox to align child items vertically center and horizontally equally spaced.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  display: flex; //Set display to flex
  justify-content : space-around; //space equally horizontally
  align-items: center; //place at center vertically
}

No need to give any extra styling to child elements i.e. <img> in your case. Flexbox will take care of alignments and is very well supported by most of the browsers.

Upvotes: 2

Yousif Al-Raheem
Yousif Al-Raheem

Reputation: 511

Just add text-align: center; to the parent div.fixed

Upvotes: 1

Vixed
Vixed

Reputation: 3499

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  text-align: center;
}
div.fixed >img{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-height: 80%;
}
<div class="fixed">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
</div>

Upvotes: 4

Indesejavel Coisa
Indesejavel Coisa

Reputation: 486

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 9%;
    background-color: pink;
    text-align: center

}


img
{ 
  display:inline-block; 
}

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can just add text-align: center on fixed div.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  text-align: center;
}
<div class="fixed">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
</div>

Upvotes: 6

Related Questions