时间戳

首页 > 解决方案 > 三个图像居中，并排，位于页面中间

html - 三个图像居中，并排，位于页面中间

问题描述

我试图将 3 张图像并排居中放在页面中间，但我似乎无法完成最后一部分。我的代码：

<!DOCTYPE html>
    <html>
    <title>Exercise #1: Problem 5</title>
    <head>
        <style>
    * {
      box-sizing: border-box;
    }

    .column {
        float: left;
        width: 33.33%;
        padding: 5px;
    }

    /* Clearfix (clear floats) */
    .row::after {
        content: "";
        clear: both;
        display: table;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    </style>
    </head>
    <body>

    ////some other code not related
        <div class="row">
            <div class="column">
                <img src="https://previews.123rf.com/images/belchonock/belchonock1802/belchonock180284998/96079443-small-baby-carrots-in-plate-on-white-background.jpg" alt="Carrots" style="width:100%">
            </div>
            <div class="column">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cucumber-slice-royalty-free-image-153556336-1562870568.jpg?crop=0.66682xw:1xh;center,top&resize=480:*" alt="Cucumbers" style="width:100%">
            </div>
            <div class="column">
                <img src="https://img.freepik.com/free-photo/organic-background-green-vegetarian-nutrition_1203-5845.jpg?size=626&ext=jpg" alt="Cabbage" style="width:100%">
            </div>
        </div>
        <hr>

    </body>
</html>

如何将其更改为仅 html 以及如何将图像放在页面中间？

标签： htmlimage

解决方案

在引导程序的帮助下，你可以很容易地做到这一点。

<div class="d-flex justify-content-center">
    <div class="row">
        <div class="col-4">
            <img src ...>
        </div>
        <div class="col-4">
            <img src ...>
        </div>
        <div class="col-4">
            <img src ...>
        </div>
     </div>
</div>

您需要将引导程序添加到您的 HTML：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

注意：本例中的 bootstrap 版本为 3.4.1

推荐阅读