CODEWITHSUNDEEP
htmlcss
R Wri
R Wri

Reputation: 302

Aligning rows of buttons with a title in CSS

I am really bad with CSS and I am trying to align rows of buttons with a title. My current display looks like:

.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>

What I am looking to do is have all the buttons align with each other, while remaining centered with the title. I have tried floats and changing the text align, but as you can probably guess that makes it so the buttons are not aligned with the title.

The caveat is that the number of buttons that are added to the list is not known, so it could be 1 or it could be 100. I am also trying to avoid using left margin/padding, to keep it consistent across screen resolutions.

The output would want looks like the following(without using a margin):

.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>

EDITS:

Update removing the fixed widths.

Upvotes: 3

Views: 1546

Answers (3)

symlink
symlink

Reputation: 12218

Remove the width from the buttons themselves, and give their container a width of 75% and a display type of grid:

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {}

.listofbuttons {
  display: -ms-grid;
  display: grid;
  -ms-grid-template-columns: repeat(3, 1fr);
  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>

Upvotes: 1

Danziger
Danziger

Reputation: 21171

To horizontally center .listofbuttons you can add margin: 0 auto and width / max-width to it.

You need to set the right width to the buttons, which in your case seems to me like it should be calc(33.3333% - 4px).

Then, to position/align them properly, you can either use Flexbox, CSS Grid (as others have suggested) or float: left, just like you were doing:

Flexbox solution:

body {
  margin: 0;
  font-family: monospace;
}

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {
  margin: 8px 0;
}


.listofbuttons {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}

.button {
  font-family: monospace;
  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>

float: left solution:

body {
  margin: 0;
  font-family: monospace;
}

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {
  margin: 8px 0;
}

.listofbuttons {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.button {
  font-family: monospace;
  margin: 2px;
  width: calc(33.3333% - 4px);
  float: left;
}
<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>

Upvotes: 1

alex067
alex067

Reputation: 3301

Not exactly sure what you're looking for, but if you want to horizontally or vertically align elements within a container, you can use flex.

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

This will make any children of listofbuttons be aligned with each other. By default, it will align them horizontally.

I suggest you take a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions