0

I am trying to center three images on my page. The page consists on a fixed menu on the left of the page and a div in which I want to display three photos (later it will be more photos) with float: left property on my CSS but centered horizontally, I mean that on the left and on the right of the photos have to be the same space. I want it to be responsive.

Here it is what I want:

┌───────────────────────────────────────────────────────────┐
|    HEADER(The white space without anything by the moment) |
├──────────┬────────────────────────────────────────────────┤ 
|          |               DIV CONTAINER                    |
|          |                                                |
|          |                                                |
|          |    [SPACE]      THE IMAGES        [SPACE]      |
|   MENU   |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
|          |                                                |
└──────────┴────────────────────────────────────────────────┘

Both spaces have to be equals.

I tried a lot of changes on my CSS to get that behaviour but I could not get it. I also take as reference the answers on this question: Align image in center and middle within div but still does not work.

Here is my actually code:

<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <TITLE>Title</TITLE>
        <style type = "text/css">

            body{
                margin: 0;
            }

            #menu{
                background-color: orange;
                position: fixed;
                text-align: center;

                left: 0px;
                top: 0px;
                width: 120px;
                height: 100%;
                margin-top: 150px;
            }

            #container{
                position: absolute;

                left: 120px;
                top: 150px;
                width: 100%;
                height: 100%;
                text-align: center;
            }

            img.centeredImages{
                display: inline-block;
                width: 350px;
                height: 200px;
                float: left;
                margin: auto;
            }

            #image1{

                margin: 20px 20px;
            }

            #image2{

                margin: 20px 10px;
            }

            #image3{

                margin: 20px 8px;
            }

        </style>
    </HEAD>

    <BODY>

        <div id = "menu">
            <span class = "spanMenu"> HOME </span> 
            <span class = "spanMenu"> LOGS </span>
            <span class = "spanMenu"> QUESTIONS </span>
        </div>

        <div id = "container">
            <img class = "centeredImages" id = "image1" src = "https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
            <img class = "centeredImages" id = "image2" src = "http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
            <img class = "centeredImages" id = "image3" src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
        </div>

    </BODY>
</HTML>

Thanks in advance!

Community
  • 1
  • 1
Francisco Romero
  • 12,787
  • 22
  • 92
  • 167
  • See this [fiddle](https://jsfiddle.net/lalu050/87t6k2v3/1/embedded/result/)..is this what you want? – Lal Oct 24 '15 at 17:01
  • How can You want both `float: left;` and align center? It doesn't make any sense. – Bogdan Kuštan Oct 24 '15 at 17:10
  • @Lal Exactly this but I saw a problem. In my case the horizontal scrollbar it is always display on the screen but in your case the horizontal scrollbar only appears when I go to the bottom of the page. Also I would want to avoid that scrollbar and try to display the images with the same space in the left and in the right at the same moment the user enter on the page, not to do a scrollbar to see the images centered. – Francisco Romero Oct 24 '15 at 17:13
  • @BogdanKuštan I am starting on webpages, it is why I put the question here :S – Francisco Romero Oct 24 '15 at 17:13
  • @Error404 is [this](https://jsfiddle.net/lalu050/87t6k2v3/2/embedded/result/) what you want? – Lal Oct 24 '15 at 17:21
  • @Lal More or less but trying to put more than one image in a line. Also, it is not 100% centered, right? – Francisco Romero Oct 25 '15 at 11:03
  • @Error404 will update the fiddle soon... – Lal Oct 25 '15 at 11:33
  • @Lal Thanks for your help man but finally with 'Viktor Maksimov' I got it. Thank you again! – Francisco Romero Oct 25 '15 at 11:45

4 Answers4

0

I recommend using bootstrap or foundation 5. In bootstrap:

<div class="row">
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
 <div class="col-md-3"><img src=""></div>
</div>

you can add xs, lg, xl later if you want.

In foundation5:

<div class="row">
 <div class="medium-3 columns offset-1"><img src=""></div>
 .
 .
 .
</div>

you can also use block grid which is made for troubles like yours :).

the_young_programmer
  • 121
  • 1
  • 6
0

By adding a display: inline-block to all the images and then text-align: center to the container element, the images will all take up the same space and be horizontally centered.

However, since you want each image to be centered horizontally but on a new line I would add display:block to the images, along with position:relative and left: 50%. Finally, I would add a negative margin on the images which would look like margin-left: -[insert half of your image width].

Hope this helps.

Nirvik Baruah
  • 1,643
  • 2
  • 19
  • 20
  • I don't want each image on a new line. What I want it is that the images will be displayed in a lot of lines (the lines needed depending of the screen) and that they will be responsive. With your solution the images go to the right of the screen but they are not centered inside the div. – Francisco Romero Oct 25 '15 at 11:22
0

1.Firstly change the width of the #container :

#container { 
    width: calc(100% - 120px); 
}

2.And after that remove the float to the images. They are display: inline-block so they will be on one line:

img.centeredImages {
    float: none;
}

I hope this will help you.

Viktor Maksimov
  • 1,465
  • 1
  • 10
  • 11
  • It is exactly what I want but can you explain me a bit more detailed what `calc` function and why I have to put `float: none` to get it please? Thank you! – Francisco Romero Oct 25 '15 at 11:13
  • 1
    Calc is a native CSS way to do simple math in CSS as a replacement for any length value (or pretty much any number value). It's just a way to do basic math to calculate a position whilst using different units of measurement. – Nirvik Baruah Oct 25 '15 at 12:13
0

You can easily achieve that by wrapping each image in a container:

.image-wrapper{
    width: 100%;
    float: left;
}

.image-wrapper img{
    width: 100%;
    max-width: 350px;
    max-height: 200px;
    margin-bottom: 20px;
}

<div class="image-wrapper">
    <image ... />
</div>

Have a look at this example:

body {
  margin: 0;
}
#menu {
  background-color: orange;
  position: fixed;
  text-align: center;
  left: 0px;
  top: 0px;
  width: 120px;
  height: 100%;
  margin-top: 150px;
}
#container {
  position: absolute;
  top: 150px;
  left: 120px;
  text-align: center;
}
.image-wrapper img {
  width: 100%;
  max-width: 350px;
  max-height: 200px;
  margin-bottom: 20px;
}
.image-wrapper:last-child img {
  margin-bottom: 8px;
}
.image-wrapper {
  width: 100%;
  float: left;
}
<div id="menu">
  <span class="spanMenu"> HOME </span> 
  <span class="spanMenu"> LOGS </span>
  <span class="spanMenu"> QUESTIONS </span>
</div>

<div id="container">
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
  <div class="image-wrapper">
    <img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
  </div>
  <div class="image-wrapper">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
  </div>
</div>

To have more images aligned on the same row change the width of .image-wrapper, and have a look at CSS media queries to obtain a better responsive result on different devices and screen sizes.

jakopo87
  • 96
  • 3
  • 6