我有一个盒子,里面有一个 display: inline-block 元素。如果框中的元素没有填满整行,我需要将内容对齐在中间,但元素在左边。
我曾尝试在行内 block 中设置全部内容,但这仅适用于只有一行元素而不是两行或更多行的情况。此外,我需要它具有响应性,因此不能使用固定缩进。
代码:
.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>
最佳答案
您可以从父容器中删除 display:inline-block;
但将其保留在子元素中。
对于你的其他容器,你可以去:
.inner{
display:block;
max-width:90%;
margin:0 auto;
text-align: left;
}
将 max-width
设置为适合您的值。
编辑:我知道这不是您想要的完美解决方案,但就我而言,如果没有一些脚本,您想要的是不可能的。
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>
关于html - 带有行内 block 元素的中心框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37320483/