CODEWITHSUNDEEP
htmlcsscss-grid
timbo
timbo

Reputation: 14324

Span within div with grid cell alignment

I have a <span> within a <div> within a grid, for example: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  align-self: center;
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  padding-left: 15px;
  height: 100%;
}
<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

The first cell has to have a border that reaches the top border of the grid and the contents have to be centered in the grid cell. I cannot remove the span as it's coming from a component that does localization.

I'm aware that the vertical alignment could be done with flexbox but that seems like overkill...

Upvotes: 0

Views: 1637

Answers (2)

sol
sol

Reputation: 22939

Flexbox is probably the easiest way to do this.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

Upvotes: 1

dippas
dippas

Reputation: 60563

Because you don't want to use flexbox, and it make sense you can set display:grid in .label and align-self in span

.container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  display: grid;
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  padding-left: 15px;
  height: 100%;
}
.label span {
  align-self: center;
  margin: auto /* optional */
}
<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

Upvotes: 3

Related Questions