Heeky Heeky - 6 months ago 19
HTML Question

Horizontal div img alignment

I have small problem trying to make my website look better.
The problem is that I'm trying to align images inside my div tag, horizontally. I have searched google and read other posts here, but none of them seemed to work for me. I've tried things like: float, margin, position:absolute, but none of them wanted to work, they just end up aligning in the center and going downwards, so I'm wondering if anybody has any solution to this problem.

Thanks in advance!



<style>
body {
background-image: url('bakgrund.jpg');
}

#galleri {
width: 200px;
display:block;
margin: auto;
}

.galleri img {
border-radius: 50%;
opacity: .6;
margin: auto;
}

.galleri img:hover {
opacity: 1;
}

</style>


<body>
<div class="galleri" id="galleri" >
<img src="mat1.jpg" width="250" height="250" alt="avocado">
<img src="mat2.JPG" width="250" height="250" alt="tapas" align="3">
<img src="mat3.jpg" width="250" height="250" alt="soft taco">

<img src="mat5.jpg" width="250" height="250" alt="hard taco" >
<img src="rest1.jpg" width="250" height="250" alt="restaurang">
<img src="rest2.jpg" width="250" height="250" alt="restaurang2">
</div>
</body>




Answer

Try this changes

<style>
    body {
        background-image: url('bakgrund.jpg');
    }

    .galleri {
        display: block;
        margin: 30px auto;
        text-align: center;
    }

    .galleri img { 
        border-radius: 50%;
        opacity: .6;
        margin: auto 30px;
    }

    .galleri img:hover { 
        opacity: 1;

    }

</style>

<body>
    <div class="galleri">
        <img src="mat1.jpg" width="250" height="250" alt="avocado">
        <img src="mat2.JPG" width="250" height="250" alt="tapas" align="3">
        <img src="mat3.jpg" width="250" height="250" alt="soft taco">
    </div>
    <div class="galleri">
        <img src="mat5.jpg" width="250" height="250" alt="hard taco" >
        <img src="rest1.jpg" width="250" height="250" alt="restaurang">
        <img src="rest2.jpg" width="250" height="250" alt="restaurang2">
    </div>
</body>

you should make another element for every 3 images

Comments