0

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

dippas
  • 58,591
  • 15
  • 114
  • 126
timbo
  • 13,244
  • 8
  • 51
  • 71

2 Answers2

3

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
1

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>
sol
  • 22,311
  • 6
  • 42
  • 59