Issue Description :
- I am facing a problem with centering inline-block elements.
- When the elements exceed the width of a single line,
Action Required : I want them to be justified to the left. - I have tried using flex boxes and other methods, but I can't seem to achieve both (center and justify left) simultaneously.
If anyone has any insights on how to solve this issue, your help would be appreciated!
Feel free to check out the jsfiddle link below where I have been experimenting with different approaches:
Current Layout:
Desired Layout:
https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/
Code Samples:
jsx:
<div>
<button onClick={this.handleClick}>Increase!</button>
<div id="items-box">
{ items.map((item, idx) => (
<div className="item-box" key={idx}>{item}</div>
))}
</div>
</div>
CSS:
#items-box {
margin: 50px;
text-align: center;
}
.item-box {
display: inline-block;
height: 100px;
width: 110px;
margin-right: 15px;
margin-top: 20px;
outline: thin solid black;
}