Question

我有3个带有字幕的数字。我希望它们在页面中间并排水平对齐，但我只能得到三个垂直的页面。仅使用HTML5和CSS，该如何完成？

这是我的HTML：

    <div class="row">
        <figure>
            <img src="person-3593657_960_720.jpg" alt="Run">
            <figcaption>Running</figcaption>
        </figure>
        <figure>
            <img src="people-2581913_1280.jpg" alt="Shopping">
            <figcaption>Shopping</figcaption>
        <figure>
            <img src="family-2609528_640.jpg" alt="people jumping in air">
            <figcaption>Spending time with friends & family</figcaption>
        </figure>
    </div>

这是我的CSS：

    .row figure {
        display: flex;
        flex-flow: column;
        padding: 5px;
    }

   .row figure img {
       margin:auto;
       padding:auto;
       width: 30%;
       box-shadow: rgb(101, 101, 101) 10px 10px 25px; 
   }

   .row figure figcaption {
       color: rgb(19, 7, 122);
       font: italic smaller sans-serif;
       padding: 3px;
       text-align: center;
   }

Answer 1

将Call Shell("notepad C:\gp.txt", vbNormalFocus)更改为flex-flow: column;或flex-flow: row;

Answer 2

缺少一个闭合数字标签，这是您无法实现所需目标的原因之一。

我使用display: flex并隐式提及flex-direction: row（可选）将图形水平放置，并通过指定width: 100%;占据容器的整个宽度（100％）；在这种情况下，为body元素。

justify-content: center将使div的内容居中。

.row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}

figure {
  margin: 0;
  margin-right: 20px;
  /*
  The below properties are demo purpose. Feel free to change it to fit your needs. 
  */
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="row">
  <figure>
    <img src="person-3593657_960_720.jpg" alt="Run">
    <figcaption>Running</figcaption>
  </figure>
  <figure>
    <img src="people-2581913_1280.jpg" alt="Shopping">
    <figcaption>Shopping</figcaption>
  </figure>
  <figure>
    <img src="family-2609528_640.jpg" alt="people jumping in air">
    <figcaption>Spending time with friends & family</figcaption>
  </figure>
</div>

使用CSS将3个带有字幕的数字彼此相邻显示

2 个答案: