Javascript CSS：使子div宽度自动转换为其中的内容，而不是完整的父宽度

我的css有一些问题。关于标题，我很抱歉，我不太确定如何用几句话来解释它，但它在这里。这就是我面临的问题。我有一个包装器父div，它与页面的中心对齐。在那个div里面我有另一个div，这个div里面有图片。问题是我将子div设置为width:auto，并且宽度始终是父div的全长。我希望它自动缩放到与其中的内容一样大，以便我可以将其置于父div的中心。下面是我的意思

灰色部分是我的父div wrapper，红色部分是我的子div gameswrapper。我希望GameSrapper与其中的游戏图片大小相同

这是我的css

#wrapper {
background: #ddd;
width: 70%;
max-width: 70%;
margin: auto;
padding: 10px;
font-family: 'CaviarDreamsBold';
}
#gamesdisplay {
    display:block;
}
#searchdisplay {
    display:block;
}
.artwork {
margin: 6px;
width: 150px;
height: 230px;  
background: #666;
display: inline-block;
cursor: pointer;
}

这是我的html

<div id="wrapper">
<div id="gamesdisplay" style="overflow:auto; width:auto; background:red;">
<a href=''><div class="artwork" style="background: url('')"></div></a>

---

有人知道如何解决这个问题吗？

我会这样做：

---

只需使用内联块作为子对象的显示模式。。。这将消除div的宽度扩展行为：）

我会这样做：

---

只需使用内联块作为子对象的显示模式。。。这将消除div的宽度扩展行为：）

您可以通过将

#wrapper

设置为

文本对齐：居中，并为
#gamesdisplay
提供
内联块的dipslay类型来实现

以下是CSS（包括您的原始CSS）：

下面是一个关于codepen的工作示例：

您可以通过设置
#包装器
使
文本对齐：居中
并提供
#游戏显示
内联块的dipslay类型来完成此操作

以下是CSS（包括您的原始CSS）：

下面是一个关于codepen的工作示例：

这是可行的，但不幸的是，当你到达底部时，如果最后一行上的图像较少，它们将与中心对齐，就像这样，有没有办法将它们与中心对齐，但还是在左边？@blackhawk338你能用你正在应用于图像的样式来修改你的原始问题吗？@blackhawk338你只需将
float:left
添加到
。artwork
中，你就得到了你想要的：不幸的是，当你将float:left添加到.artwork中时，他们回到了b不以黑鹰338为中心，我认为有更多的风格干扰。如果您在这里看到：您只能看到两个
。artwork
在标记中并且仍然居中。这是可行的，但不幸的是，当您到达底部时，如果最后一行上的图像较少，它们将与中心对齐，就像这样有没有办法将它们与中心对齐，但还是在左边？@blackhawk338你能用你正在应用于图像的样式来修改你的原始问题吗？@blackhawk338你只需将
float:left
添加到
。artwork
中，你就得到了你想要的：不幸的是，当你将float:left添加到.artwork中时，他们回到了b不以黑鹰338为中心，我认为有更多的风格干扰。如果您在这里看到：您只能看到两个
。艺术品
在标记中，并且仍然居中。
#wrapper {
  background: #ddd;
  width: 70%;
  max-width: 70%;
  margin: auto;
  padding: 10px;
  font-family: 'CaviarDreamsBold';
  text-align: center;
}
#gamesdisplay {
  display: inline-block;
  padding: 10px;
}
#searchdisplay {
  display:block;
}