css 如何在< div>将其宽度调整为内容大小的同时居中？

rjee0c15 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(162)

请在此处查看我的代码：
https://www.w3schools.com/code/tryit.asp?filename=FFTMB6LPPZZ5
(You需要单击“运行”按钮查看结果）
我想要实现的是“insideDiv”（黄色div）将：
1.在“outsideDiv”（绿色div）内占用尽可能多的宽度。
1.在“outsideDiv”（同样是绿色div）内居中。
1.我希望最左边的“shortItem”（白色项）和“insideDiv”（黄色div）的左边框之间差距/空间与最右边的“shortItem”和“insideDiv”（黄色div）的右边框之间的间隙/空间完全相同（例如20 px）。
我如何才能做到这一点呢？如果您运行我的代码并调整显示部分的宽度，您会发现左右两侧的空间并不相同。
如果你想你可以改变我的例子，保存它使用图标在左上角附近的'主页'图标，并在这里给一个链接到固定的代码。
希望你能帮我，谢谢！
我的代码：
第一个
更新：
1.我不想更改“shortItem”项（白色项）的宽度。
1.下面的图像显示了我正在尝试解决的问题：
https://ibb.co/jDz92a

css

来源：https://stackoverflow.com/questions/44101525/how-can-i-center-a-div-while-adjusting-its-width-to-the-content-size

2条答案

按热度按时间

llycmphe1#

这是我用你的代码创建的一个fiddle。请检查这是否是你需要的

.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 5%;
}

.insideDiv {
  background-color: yellow;
  margin: 1%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 1px solid black;
  width: auto;
}

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  float: right;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid black;
  height: 30px;
  width: 100%;
  max-width: 120px;
}

赞(0）回复(0）举报 2022-11-19

hc8w905p2#

我已经编辑了您的代码，您可以看到here：

<!DOCTYPE html>
<html>
<head>
<style>
.outsideDiv {
  background-color: green;
  margin: auto;
  width: 50%;
  border: 1px solid black;
  text-align: center;
  padding: 20px;
  }

.insideDiv {
  background-color: yellow;
  margin:0 auto;
  width:100%;
  display: block;
  border: 1px solid black;
  }

.shortItem {
  background-color: white;
  display: block;
  color: black;
  text-align: center;
  padding: 7px 17px;
  text-decoration: none;
  float: right;
  margin: 10px;
  border: 1px solid black;
  height: 30px;
  width: 120px;
  }
.clear {
    clear:both;
}
</style>
</head>

<body>
<div class="outsideDiv">
  <div class="insideDiv">
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="shortItem"></div>
    <div class="clear"></div> 
  </div>
</div>
</body>
</html>

这就是你要找的吗
关键编辑：
1.清除innerDiv内的浮动元素
1.使用margin:0自动使innerDiv居中

赞(0）回复(0）举报 2022-11-19

我来回答

css 如何在< div>将其宽度调整为内容大小的同时居中？

2条答案

相关问题

热门标签

最新问答