Question

我试图让我的网站看起来更好，但我遇到了一些小问题。问题是我正在尝试水平地对齐div标签内的图像。我在这里搜索谷歌和阅读其他帖子，但它们似乎都不适合我。我尝试过这样的事情：浮动，保证金，头寸：绝对，但没有一个想要工作，他们只是最终在中心对齐并向下，所以我想知道是否有人有任何解决这个问题的方法。

提前致谢！

<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 1

尝试此更改

<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>

你应该为每3张图片制作另一个元素

水平div img对齐

1 个答案: