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

【问题标题】：How can I center a <div> while adjusting it's width to the content size...?如何在将宽度调整为内容大小的同时将 <div> 居中...？
【发布时间】：2017-10-21 10:36:25
【问题描述】：

请在此处查看我的代码：

https://www.w3schools.com/code/tryit.asp?filename=FFTMB6LPPZZ5

（您需要点击“运行”按钮才能看到结果）

我想要实现的是“insideDiv”（黄色 div）将：

在“outsideDiv”（绿色 div）内尽可能多地占据宽度。
在 'outsideDiv' 内居中（同样是绿色 div）。
我希望最左边的“shortItem”（白色项目）和“insideDiv”（黄色 div）的左边框之间的间隙/空间将完全（例如 20 像素）作为最右边的“shortItem”和“insideDiv”的右边框之间的间隙/空间（同样是黄色的 div）。

我怎样才能做到这一点？如果您将运行我的代码并使用显示部分的宽度，您会发现它在右侧和左侧没有保持相同的空间。

如果您愿意，可以更改我的示例，使用左上角“主页”图标附近的图标保存它，并在此处提供固定代码的链接。

希望你能帮助我，谢谢！

我的代码：

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

.insideDiv {
  background-color: yellow;
  margin: 10px;
  display: inline-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;
  }

<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>
</div>

更新：

我不想更改“shortItem”项（白色项）的宽度。
这是一张图片，显示了我正在尝试解决的问题：

https://ibb.co/jDz92a

【问题讨论】：

请直接在 Stack Overflow 上分享相关代码。看看这里stackoverflow.com/help/how-to-ask
我现在，我已经编辑过了。
对不起 vlk 但它不允许我复制它说它太长的代码，并且要查看问题，您需要整个代码而不仅仅是其中的一部分。

标签： html css width center adjustment

【解决方案1】：

我已经编辑了你的代码，你可以看到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>

这就是你要找的吗？

主要修改：

清除innerDiv内的浮动元素
使用margin:0 auto 将innerDiv 居中

【讨论】：

您好，谢谢您的帮助，但这不是我想要的，尝试使用显示部分的宽度（您可以用鼠标按住代码部分和结果部分之间的边框并更改宽度），您会看到左侧的间隙（最左边的白色项目和黄色 div 的左边缘之间的黄色小间隙）与右侧的间隙不一样...跨度>

【解决方案2】：

这是我使用您的代码创建的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;
}

【讨论】：

抱歉，它不起作用，请参阅此处的图片来解释问题所在：ibb.co/jDz92a
leoc1f3r，是的，现在两边的间隙是一样的......但我不想改变“shortItem”项目（白色项目）的宽度，对不起，也许我不得不在我原来的问题中指出这一点。
您能否更新您的问题并详细说明您想要实现的目标？谢谢。附言我已根据您最近评论的理解更新了代码
leoc1f3r，我更新了我的问题（请参阅问题底部的更新部分）。你说你更新了你的代码，我在哪里可以看到它？你能给我一个新代码的链接吗？
我检查了您的代码...再次我的错误，我没有澄清这一点，但我希望白色块（“shortItem”）之间的差距将被修复（例如 20px）和不会改变，左右两边的缝隙也是一样的。我还希望这个白色 div 向左或向右对齐，我不希望它们居中。是否可以更改您的代码来实现这一目标？