Question

我在网格中的<span>内有一个<div>，例如：

＆＃13;

.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%;
}

＆＃13;

<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

＆＃13;

第一个单元格必须具有到达网格顶部边框的边框，并且内容必须在网格单元格中居中。我无法删除跨度，因为它来自进行本地化的组件。

我知道可以使用flexbox进行垂直对齐，但这看起来有点过分......

Answer 1

因为您不想使用flexbox，并且有意义，您可以在def read_all_samples(sample_path): return (tf.data.Dataset.list_files(sample_path+"/masks/*.png") .map(tf.read_file) .map(lambda x: tf.image.decode_image(x, channels=1)) .batch(1024)) # maximum number of objects ds = tf.data.Dataset.from_tensor_slices(tf.glob("../input/stage1_train/*")) ds = ds.flat_map(read_all_samples) sample = ds.make_one_shot_iterator().get_next()中设置display:grid，在.label设置align-self

＆＃13;

span

＆＃13;

.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 */
}

＆＃13;

Answer 2

Flexbox可能是最简单的方法。

＆＃13;

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

＆＃13;

<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

＆＃13;

div内的跨度与网格单元对齐

2 个答案: