将按钮的行与CSS中的标题对齐

问题描述 投票:1回答:2

我真的对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>

编辑:

更新删除固定宽度。

html css
2个回答
0
投票

删除按钮本身的宽度,并为其容器提供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>

0
投票

不确定要查找的内容,但是如果要在容器中水平或垂直对齐元素,则可以使用flex。

.listofbuttons{
display: flex;
align-items:center;
justify-content:center;
}

这将使按钮列表的所有子元素彼此对齐。默认情况下,它将水平对齐。

我建议您看看https://css-tricks.com/snippets/css/a-guide-to-flexbox/


0
投票

您可以使用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>
© www.soinside.com 2019 - 2024. All rights reserved.