CODEWITHSUNDEEP
htmlcssyui-pure-css
goodson
goodson

Reputation: 757

How to center the content of (centered) pure css columns

The snippet presents a series of columns containing a single letter. I'd like to have the center of the glyph in the center of each, but as you can see, they not quite centered -- appearing just off to the right. (I suspect by half the glyph width, but I'm not sure).

I've tried justify-content: center, margin: auto to no avail. Inspecting the pure, I don't see anything that should prevent what I'm aiming for. Can you help me fix it?

.centered-cols {
  justify-content: center;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

Upvotes: 1

Views: 497

Answers (5)

Mcbeer
Mcbeer

Reputation: 98

Since we are already in the realms of flexbox, something like this could also work, without the need for !important

.centered-cols {
  justify-content: center;
}

.key {
  display: flex;
  justify-content: center;
  letter-spacing: normal;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272985

Use CSS grid if you want equal width item and you can easily center them:

.centered-cols {
  display:grid;
  width:max-content;
  margin:auto;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}

.key {
  text-align:center;
  padding:0 .8em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="centered-cols">
  <div id="q" class="key"><p>A</p></div>
  <div id="w" class="key"><p>B</p></div>
  <div id="e" class="key"><p>C</p></div>
  <div id="r" class="key"><p>D</p></div>
  <div id="t" class="key"><p>E</p></div>
  <div id="y" class="key"><p>F</p></div>
  <div id="u" class="key"><p>G</p></div>
  <div id="i" class="key"><p>H</p></div>
  <div id="o" class="key"><p>I</p></div>
  <div id="p" class="key"><p>J</p></div>
</div>

Upvotes: 1

Andrii Svirskyi
Andrii Svirskyi

Reputation: 376

just remove letter-spacing: -.31em; in pure-g class

Upvotes: 1

connexo
connexo

Reputation: 56753

Pure is creating this problem by setting a letter-spacing: -.31em in the pure-g CSS class.

Just set letter-spacing: normal !important; to overwrite it:

.centered-cols {
  justify-content: center;
  letter-spacing: normal !important;
}

.key {
  text-align: center;
  min-width: 2.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

Upvotes: 1

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5326

Add letter-spacing: 0 in your .key css class:

.key {
  letter-spacing: 0;
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key">
    <p>A</p>
  </div>
  <div id="w" class="pure-u-1-10 key">
    <p>B</p>
  </div>
  <div id="e" class="pure-u-1-10 key">
    <p>C</p>
  </div>
  <div id="r" class="pure-u-1-10 key">
    <p>D</p>
  </div>
  <div id="t" class="pure-u-1-10 key">
    <p>E</p>
  </div>
  <div id="y" class="pure-u-1-10 key">
    <p>F</p>
  </div>
  <div id="u" class="pure-u-1-10 key">
    <p>G</p>
  </div>
  <div id="i" class="pure-u-1-10 key">
    <p>H</p>
  </div>
  <div id="o" class="pure-u-1-10 key">
    <p>I</p>
  </div>
  <div id="p" class="pure-u-1-10 key">
    <p>J</p>
  </div>
</div>

Upvotes: 1

Related Questions