<div class="boxCenterList" style="display: flex;flex-direction: column;align-items: center;"> <img src="${article.image }" alt="" style="width: 70%; height: 300px;" /> <br /> ${article.contents } </div>其中如何使${article.contents } 中的内容向左对齐

你可以在外层的 div 标签上添加 `text-align: left;` 的样式，即可使其中的内容向左对齐。例如：

<div class="boxCenterList" style="display: flex;flex-direction: column;align-items: center; text-align: left;">
  <img src="${article.image}" alt="" style="width: 70%; height: 300px;" />
  <br />
  ${article.contents}
</div>

相关问题

<div class="boxCenterList" style="display: flex;flex-direction: column;align-items: center;"> <img src="${article.image }" alt="" style="width: 70%; height: 300px;" /> <br /> ${article.contents } </div>其中${article.contents } 内容第一句也会居中，如何使其他句子也居中

您可以将整个内容包裹在一个 div 中，并设置该 div 的样式 `text-align: center;`，这将使该 div 中的所有文本都居中显示。例如：

<div style="text-align: center;">
  <div class="boxCenterList" style="display: flex;flex-direction: column;align-items: center;">
    <img src="${article.image}" alt="" style="width: 70%; height: 300px;" />
    <br />
    ${article.contents}
  </div>
</div>

body { margin: 0; padding: 0; } .container { display: flex; height: 100vh; } .sidebar { width: 300px; height: 100%; background-color: #f0f0f0; border-right: 1px solid #ccc; } .content { flex: 1; display: flex; flex-direction: column; } .box { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; font-weight: bold; text-align: center; box-sizing: border-box; padding: 20px; } .box:nth-child(1) { flex-grow:1; background-color: #f44336; } .box:nth-child(2) { flex-grow:1; background-color: #2196f3; } .box:nth-child(3) { margin-left: 20px; margin-right: 20px; margin-top: 10px; border-radius: 10%; background-color: #4caf50; flex-grow:1.5; } <div class="container"> <div class="sidebar"></div> <div class="content"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3 item">Box 3 <img src="img/box3.jpg" alt=""><br> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> </div> <div class="box box4"> <div class="sub-box">Sub Box 1</div> <div class="sub-box">Sub Box 2</div> <div class="sub-box">Sub Box 3</div> </div> <div class="box box5"> <div class="sub-box">Sub Box 1</div> <div class="sub-box">Sub Box 2</div> </div> </div> </div> 补充样式使box3中的 图片占一行 文字占一行 文字位于图片的正下方,不同图片间存在间距

可以使用flex布局和align-items属性来实现图片和文字一行显示，同时使用justify-content属性来控制图片和文字的对齐方式。代码如下：

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.item img {
  margin-bottom: 10px;
  width: 100%;
}

.label {
  margin-top: 10px;
}

将上述代码添加到原有的CSS样式中即可。同时，为了让不同图片之间存在一定的间距，可以为img标签添加一个margin-bottom属性。