Question

如何使用CSS将divs内的<div id="main>"移到中心？

<div id="main" style="float: left;width: 100%;text-align: center;border: 1px solid;">
  <div style="float: left;font-size: 14px;padding: 5px;background: red;">AAA</div>
  <div style="float: left; font-size: 14px; display: block;padding: 5px;background: green;">BBB</div>
  <div style="float: left;font-size: 14px;padding: 5px;background: blue;">CCC</div>
</div>

Answer 1

不要漂浮内部div。将它们设为display:inline-block并将main-text属性设置为main到center：

#main {
  text-align: center;
}

#main>div {
  display: inline-block;
}

<div id="main" style="text-align: center;border: 1px solid;">
  <div style="font-size: 14px;padding: 5px;background: red;">AAA</div><div style="font-size: 14px; padding: 5px;background: green;">BBB</div><div style="font-size: 14px;padding: 5px;background: blue;">CCC</div>
</div>

或者使用flexbox，尝试以下（更简单）：

#main {
  display:flex;
  justify-content:center;
}

<div id="main" style="border: 1px solid;">
  <div style="font-size: 14px;padding: 5px;background: red;">AAA</div>
  <div style="font-size: 14px; padding: 5px;background: green;">BBB</div>
  <div style="font-size: 14px;padding: 5px;background: blue;">CCC</div>
</div>

如何使用css将div id =“main”中的3 div移动到中心？

1 个答案: