Jump to content

Floating element not centered - border problem


Nic727

Recommended Posts

Hi,

 

I currently have that:

1-ims.png

Here is my code for the images part:

<!-- ALBUMS LIST -->
        <div class="page-container">
            <div class="album-container">
                <div class="album-background" style="background-image:url(images/image1.jpg)">
                    <div class="album-name">
                        <h2>Photographie</h2>
                        <a href="albums.html" class="btn btn-light">Voir l'album</a>
                    </div>
                </div>
            </div>
            <div class="album-container">
                <div class="album-background" style="background-image:url(images/image2.jpg)">
                    <div class="album-name">
                        <h2>Photographie</h2>
                        <a href="albums.html" class="btn btn-light">Voir l'album</a>
                    </div>
                </div>
            </div>
            <div class="album-container">
                <div class="album-background" style="background-image:url(images/image3.jpg)">
                    <div class="album-name">
                        <h2>Photographie</h2>
                        <a href="albums.html" class="btn btn-light">Voir l'album</a>
                    </div>
                </div>
            </div>
            <div class="album-container">
                <div class="album-background" style="background-image:url(images/image4.jpg)">
                    <div class="album-name">
                        <h2>Photographie</h2>
                        <a href="albums.html" class="btn btn-light">Voir l'album</a>
                    </div>
                </div>
            </div>
        </div>
.page-container{
    width:90%;
    margin:20px auto;
    overflow:auto;
}
.album-container{
    width:50%;
    float:left;
    position:relative;
    display:block;
}
.album-background{
    background-size:cover;
    background-position:center;
    padding:20%;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    color:white;
}

 

For my image, I use background-image with padding, because height doesn't work with my floating element. If you have a solution to make this work, I would like to hear it!

Well, my current problem is not here. I tried to add a padding to my album-container to have white border around the images (like padding:13px), but for some reasons, it's acting a bit like a margin by pushing all my elements. After I tried to adjust album-container width to center my images… I found 48.1% to be good, but seems like it just works for my current screen size. Do you have a solution to add space between my albums images? Would like to be able to do that for different size.

 

Thank you

Edited by Nic727
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...