CSS：将子div宽度自动设置为内容，而不是完整的父宽度

Question

I'm having some problems with my css. Sorry about the title, i'm not too sure how to explain it in a few words, but here it is. This is the problem i'm having. I have a wrapper parent div, and that is aligned to the center of the page. Inside that div I have another div, and that div contains pictures in it. The problem is I have the child div set to width:auto, and the width is always the full length of the parent div. What I want is it to auto scale to be just as big as the content inside it, so I can center it within the parent div. Here is a picture of what I mean.

enter image description here

The grey part is my parent div, wrapper, and the red part is my child div, gameswrapper. I want gameswrapper to be the same size as the game pictures in it

Here is my 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;
}

And this is my html

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

Anyone know how to solve this?

Answer 1

I would do something like this:

https://jsbin.com/tohuluzehu/edit?html,css,output

Simply use inline-block as the display mode of the child... this will take the width expanding behaviour of the div away :)

Answer 2

you can do this by setting #wrapper to have text-align: center and giving #gamesdisplay the dipslay type of inline-block .

Here's the CSS (inc your original CSS):

#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;
}

and here's a working example on codepen:

http://codepen.io/sonnyprince/pen/grvmzj