CSS网格中表单元素的垂直居中

【问题标题】：Vertical centering of form element in CSS gridCSS网格中表单元素的垂直居中
【发布时间】：2018-07-22 02:55:26
【问题描述】：

我有一个模拟 Material Design 风格的表单 html/css 布局：

<div class="form-group">
  <input
    type="text"
    id="feedName"
    name="name"
    value={nameValue}
    onChange={this.handleInputChange}
   />
   <label class="control-label" htmlFor="feedName">Name</label>
   <i class="bar"></i>
</div>

CSS 是：

.form-group {
  position:relative;
}

.form-group input,
.form-group select {
  width: 100%;
}

.form-group input {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
  height: 1.9rem;
}

.form-group .control-label {
  position: absolute;
  top: 0.25rem;
  pointer-events: none;
  padding-left: var(--gutter);
  font-weight: normal;
  transition: all 0.28s ease;
}

.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}

.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: var(--secondaryGreen);
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

基本上，我在form-group 上设置了相对定位，然后在control-label 上设置了绝对定位，以将标签定位在输入字段的正上方。

我试图在 CSS 网格中将其作为 grid-item 居中。对于文本项，我可以以：

为中心 
.main > div:not(.form-group) {
  /* text-only item vertical centering */
  display: flex;
  align-items: center;
}

但是上面的 flexbox 搞砸了form-group。我也试过：

.form-group {
  position:relative;
  margin: auto 0;
}

但这也不起作用。

完整代码为：

:root {
  --secondaryGreen: rgba(114, 191, 68, 1);
  --gutter: 15px;
}

.main {
  margin-top: 50px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05), 0 2px 3px 0 rgba(0, 0, 0, 0.10);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 60px 50px 80px 80px 80px;
}

.main > div {
  padding: 0 var(--gutter);
}

.main > div:not(.form-group) {
  /* text-only item vertical centering */
  display: flex;
  align-items: center;
}

.title {
  font-weight: 600;
  color: var(--primaryBlue);
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

.form-group {
  position:relative;
  margin: auto 0;
  /*margin-bottom: 2.25rem;*/
  /*margin-top: auto;
  margin-bottom: auto;*/
  /*vertical-align: baseline;*/
}

.form-group input,
.form-group select {
  width: 100%;
}

.form-group input {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
  height: 1.9rem;
}

.form-group .control-label {
  position: absolute;
  top: 0; /* 0.25rem; */
  pointer-events: none;
  padding-left: var(--gutter);
  /*z-index: 1;*/
  /*font-size: 1rem;*/
  font-weight: normal;
  transition: all 0.28s ease;
}

.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: var(--secondaryGreen);
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}

.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
}

.form-group select ~ .control-label {
  top: -1.5rem;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: var(--secondaryGreen);
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}
<div class="main">
  <div class="title">Title</div>
  <div>Details</div>
  <div class="form-group">
      <input
        type="text"
        id="feedName"
        name="name"
        value=""
        onChange={this.handleInputChange}
      />
      <label class="control-label" htmlFor="feedName">Name</label>
      <i class="bar"></i>
  </div>
  <div class="form-group">
      <select
        id="feedKind"
        name="feedKind"
        onChange={this.handleInputChange}
      >
          <option value="option 1">
             Option 1
           </option>
          <option value="option 2">
             Option 2
           </option>
      </select>
      <label class="control-label" htmlFor="feedKind">Type</label>
      <i class="bar"></i>
    </div>

输入字段的位置似乎也受到其下方选择状态的影响。我很困惑grid-item 如何影响其他grid-items 的位置。

【问题讨论】：

    标签： html css centering css-grid


    【解决方案1】：

    对您的代码进行以下调整：

    （不需要绝对定位。）

    .main > div {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertical centering */
}

.form-group .control-label {
  order: -1;                  /* position label first in the stack */
}


    :root {
  --secondaryGreen: rgba(114, 191, 68, 1);
  --gutter: 15px;
}

.main {
  margin-top: 50px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05), 0 2px 3px 0 rgba(0, 0, 0, 0.10);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 60px 50px 80px 80px 80px;
}

.main > div {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* text-align: center; <-- horizontal centering, if necessary */
  border: 1px dashed red !important; /* demo only */
}

.main > div + div {
  margin-top: 10px; /* demo only */
} 

.title {
  font-weight: 600;
  color: var(--primaryBlue);
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

.form-group input {
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border-width: 0;
  border-color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
  height: 1.9rem;
}

.form-group .control-label {
  order: -1;
  pointer-events: none;
  padding-left: var(--gutter);
  font-weight: normal;
  transition: all 0.28s ease;
}

.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}

.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: var(--secondaryGreen);
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}

.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: gray;
  top: -1rem;
  left: 0;
}

.form-group select ~ .control-label {
  top: -1.5rem;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}

.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: var(--secondaryGreen);
}

.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}
    <div class="main">
  <div class="title">Title</div>
  <div>Details</div>
  <div class="form-group">
    <input type="text" id="feedName" name="name" value="" onChange={this.handleInputChange} />
    <label class="control-label" htmlFor="feedName">Name</label>
    <i class="bar"></i>
  </div>
  <div class="form-group">
    <select id="feedKind" name="feedKind" onChange={this.handleInputChange}>
      <option value="option 1">
        Option 1
      </option>
      <option value="option 2">
        Option 2
      </option>
    </select>
    <label class="control-label" htmlFor="feedKind">Type</label>
    <i class="bar"></i>
  </div>

    jsFiddle demo

    【讨论】：

    • 有趣！我放弃了标签上的绝对定位，将标签 html 重新定位到输入/选择之前，然后将标签设置为一些相对定位，并且 then 使用了 margin: auto 0;垂直对齐。这是一个更简单的解决方案。
    • 部分IE版本不支持flex。
    猜你喜欢
    • 1970-01-01
    • 2018-06-11
    • 1970-01-01
    • 1970-01-01
    • 2016-04-12
    • 1970-01-01
    • 2020-12-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode