Trying to center one column with content to the left in CSS

Question

I have a design to implement that is supposed to have a centered column of shortcuts and then a text to the left of each. It should look like this:

The column of the shortcuts should be centered below the title.

I can't get this to work with a responsive design. The markup I have is ATM this:

<div class="ax-learn__shortcuts">
 <h2>Learn shortcuts</h2>
 <div class="ax-learn__shortcuts-row">
   <div>Go to home:</div>
   <div><kbd>g</kbd>then<kbd>h</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to search:</div>
   <div><kbd>g</kbd>then<kbd>s</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to learn:</div>
   <div><kbd>g</kbd>then<kbd>l</kbd></div>
 </div>

And the current CSS, which doesn't center it perfectly at all, is this:

.ax-learn__shortcuts {
  display: flex;
  flex-direction: column;
}

.ax-learn__shortcuts h2 {
  text-align: center;
}

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

And here's an example on Codepen

What is the responsive design you want to achieve with this? — JoannaFalkowska, Jun 09 '17 at 07:40
@Senthe Just that the width of the parent is unknown, so I can't set any fixed pixel sizes — stinaq, Jun 09 '17 at 08:03

Asons · Accepted Answer · 2017-06-09T07:52:17.393

By adding a pseudo as a ghost element, that matches the labels on the left, you can set that and the left labels to flex: 1, and they will take all available space and leave the kbd in the middle.

Then text-align: right for labels and margin: 0 10px for kbd, and it will look nice too :)

I added these rules, to achieve that.

.ax-learn__shortcuts-row::after {
  content: '';
}
.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}
.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}
.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}

Updated codepen

Stack snippet

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ax-learn__shortcuts-row::after {
  content: '';
}

.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}

.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}

.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}

.ax-learn__shortcuts {
  display: flex;
  flex-direction: column;
}
.ax-learn__shortcuts kbd {
  padding: 7px 15px;
  border: 2px solid black;
  border-radius: 5px;
  background: white;
  display: inline-block;
}
.ax-learn__shortcuts kbd:first-of-type {
  margin-right: 15px;
}
.ax-learn__shortcuts kbd:last-of-type {
  margin-left: 15px;
}
.ax-learn__shortcuts h2 {
  text-align: center;
}

<div class="ax-learn__shortcuts">
  <h2>Learn shortcuts</h2>
  <div class="ax-learn__shortcuts-row">
    <div>Go to home:</div>
    <div><kbd>g</kbd>then<kbd>h</kbd></div>
  </div>
  <div class="ax-learn__shortcuts-row">
    <div>Go to search:</div>
    <div><kbd>g</kbd>then<kbd>s</kbd></div>
  </div>
  <div class="ax-learn__shortcuts-row">
    <div>Go to learn:</div>
    <div><kbd>g</kbd>then<kbd>l</kbd></div>
  </div>    
</div>

This worked perfectly, thank you! – stinaq Jun 09 '17 at 08:20 — stinaq, Jun 09 '17 at 08:20

score 0 · Answer 2 · answered Jun 09 '17 at 08:49

0

Use a table without borders for aligning and give it a relative width, just so it can scale to screen size.

answered Jun 09 '17 at 08:49

The Nerdy Geek

342
5
16

Trying to center one column with content to the left in CSS

2 Answers2