I have a box with items which have a display: inline-block. In the case that items in the box don't fill the whole line, I would need to align the content in the middle, but items to the left.
I have tried to set up the whole content in inline-block, but this works only if there is just one line of items, not two or more lines. Also, I need it to be responsive, so no fixed indent can be used.
Screen:
Code:
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display: inline-block;
text-align: left;
}
.btn{
width: 100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
Inline block divs can be centered by applying text-align:center to their parent.
You can center inline-block (and inline) elements by setting text-align: center on a parent element.
If you have a <div> with text-align:center; , then any text inside it will be centered with respect to the width of that container element. inline-block elements are treated as text for this purpose, so they will also be centered.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
You can remove display:inline-block;
from the parent container but keep it in the child elements.
For your other container you can go:
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
Set the max-width
to whatever suits you.
EDIT: I'm aware that this is not a perfect solution to what you wanted, but as far as I'm concerned what you want is not possible without some scripts.
This snippet can also be found on jsFiddle
.booking-time{
font-size: 0;
line-height: 0;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
.btn{
width:100px;
background: #3578d5;
color: #fff;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 2px;
overflow: hidden;
position: relative;
transition: box-shadow 0.3s, color 0.3s, background 0.3s;
margin: 0 5px 5px 0;
}
<div class="booking-time">
<div class="inner">
<button type="button" class="btn btn-flat">
8:00 AM
</button>
<button type="button" class="btn btn-flat">
8:15 AM
</button>
<button type="button" class="btn btn-flat">
8:30 AM
</button>
<button type="button" class="btn btn-flat">
8:45 AM
</button>
<button type="button" class="btn btn-flat">
9:00 AM
</button>
<button type="button" class="btn btn-flat">
9:15 AM
</button>
<button type="button" class="btn btn-flat">
9:30 AM
</button>
<button type="button" class="btn btn-flat">
9:45 AM
</button>
<button type="button" class="btn btn-flat">
10:00 AM
</button>
<button type="button" class="btn btn-flat">
10:15 AM
</button>
<button type="button" class="btn btn-flat">
10:30 AM
</button>
<button type="button" class="btn btn-flat">
10:45 AM
</button>
<button type="button" class="btn btn-flat">
11:00 AM
</button>
<button type="button" class="btn btn-flat">
11:15 AM
</button>
<button type="button" class="btn btn-flat">
11:30 AM
</button>
<button type="button" class="btn btn-flat">
11:45 AM
</button>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With