我真的对CSS很不好,我正在尝试将按钮行与标题对齐。我当前的显示如下:
.container {
display: inline-block;
text-align: center;
width: 100%;
}
.title {
}
.listofbuttons{
}
.button {
margin: 2px;
width: 25%;
}
<div class='container'>
<div class='title'>This is a title</div>
<div class='listofbuttons'>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
<button class="button">Button 5</button>
</div>
</div>
我想做的是使所有按钮彼此对齐,同时保持标题居中。我尝试了浮动和更改文本的对齐方式,但是您可能会猜到这使得按钮与标题不对齐。
注意:添加到列表中的按钮数量未知,因此可能是1或可能是100。我还试图避免使用左页边距/填充,以使其在整个屏幕分辨率下保持一致。
输出将需要如下所示(不使用边距):
.container {
display: inline-block;
text-align: center;
width: 100%;
}
.title {
}
.listofbuttons {
margin-left: 125px;
}
.button {
float: left;
margin: 2px;
width: 25%;
}
<div class='container'>
<div class='title'>This is a title</div>
<div class='listofbuttons'>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
<button class="button">Button 5</button>
</div>
</div>
编辑:
更新删除固定宽度。
删除按钮本身的宽度,并为其容器提供75%的宽度和显示类型的网格:
.container {
display: inline-block;
text-align: center;
width: 100%;
}
.title {}
.listofbuttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 75%;
margin: 0 auto;
}
.button {
margin: 2px;
}
<div class='container'>
<div class='title'>This is a title</div>
<div class='listofbuttons'>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
<button class="button">Button 5</button>
</div>
</div>
不确定要查找的内容,但是如果要在容器中水平或垂直对齐元素,则可以使用flex。
.listofbuttons{
display: flex;
align-items:center;
justify-content:center;
}
这将使按钮列表的所有子元素彼此对齐。默认情况下,它将水平对齐。
我建议您看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您可以使用Flexbox做到这一点:
.container {
display: inline-block;
text-align: center;
width: 100%;
}
.listofbuttons {
display: flex;
flex-wrap: wrap;
width: 80%;
max-width: 600px;
margin: 0 auto;
}
.button {
margin: 2px;
flex: 0 0 calc(33.3333% - 4px);
}
<div class='container'>
<div class='title'>This is a title</div>
<div class='listofbuttons'>
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
<button class="button">Button 5</button>
</div>
</div>