如何居中标签文字

Question

我尝试了margin，top,left...和text-align，但没有任何效果。

这是我的代码：

body {
  background: #333;
}

.centered {
  width: 550px;
  height: 110px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.group {
  width: 100%;
  height: 110px;
  overflow: hidden;
  position: relative;
}

label {
  position: absolute;
  top: 36.6666666667px;
  color: #2196f3;
  font: 400 36.6666666667px Roboto;
  cursor: text;
  transition: 0.3s ease;
}

input {
  display: block;
  width: 100%;
  padding-top: 36.6666666667px;
  border: none;
  border-radius: 0;
  color: white;
  background: #333;
  font-size: 36.6666666667px;
  transition: .3s ease;
}
input:valid ~ label {
  top: 0;
  font: 700 22px Roboto;
}
input:focus {
  outline: none;
}
input:focus ~ label {
  top: 0;
  font: 700 22px Roboto;
}
input:focus ~ .bar:before {
  transform: translateX(0);
}

.bar {
  background: #2196f3;
  content: '';
  width: 550px;
  height: 3.6666666667px;
  transition: .3s ease;
  position: relative;
}

<div class="centered">
  <div class="group">
    <input type="text" id="name" required="required"/>
    <label for="name">Name</label>
    <div class="bar"></div>
  </div>
</div>

Answer 1

您错过了text-align: center; width: 100%;的标签。现在可以了。

摘要

body {
  background: #333;
}

.centered {
  width: 550px;
  height: 110px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.group {
  width: 100%;
  height: 110px;
  overflow: hidden;
  position: relative;
}

label {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 36.6666666667px;
  color: #2196f3;
  font: 400 36.6666666667px Roboto;
  cursor: text;
  transition: 0.3s ease;
}

input {
  display: block;
  width: 100%;
  padding-top: 36.6666666667px;
  border: none;
  border-radius: 0;
  color: white;
  background: #333;
  font-size: 36.6666666667px;
  transition: .3s ease;
}
input:valid ~ label {
  top: 0;
  font: 700 22px Roboto;
}
input:focus {
  outline: none;
}
input:focus ~ label {
  top: 0;
  font: 700 22px Roboto;
}
input:focus ~ .bar:before {
  transform: translateX(0);
}

.bar {
  background: #2196f3;
  content: '';
  width: 550px;
  height: 3.6666666667px;
  transition: .3s ease;
  position: relative;
}

<div class="centered">
  <div class="group">
    <input type="text" id="name" required="required"/>
    <label for="name">Name</label>
    <div class="bar"></div>
  </div>
</div>

Answer 2

您只需要输入label：

text-align: center;
width: 100%;

因为text-align将根据width对齐文本，并且width必须为100%才能居中。

演示：

这是一个有效的演示代码段：

body {
  background: #333;
}

.centered {
  width: 550px;
  height: 110px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.group {
  width: 100%;
  height: 110px;
  overflow: hidden;
  position: relative;
}

label {
  position: absolute;
  top: 36.6666666667px;
  color: #2196f3;
  font: 400 36.6666666667px Roboto;
  cursor: text;
  transition: 0.3s ease;
  text-align: center;
  width: 100%;
}

input {
  display: block;
  width: 100%;
  padding-top: 36.6666666667px;
  border: none;
  border-radius: 0;
  color: white;
  background: #333;
  font-size: 36.6666666667px;
  transition: .3s ease;
}

input:valid~label {
  top: 0;
  font: 700 22px Roboto;
}

input:focus {
  outline: none;
}

input:focus~label {
  top: 0;
  font: 700 22px Roboto;
}

input:focus~.bar:before {
  transform: translateX(0);
}

.bar {
  background: #2196f3;
  content: '';
  width: 550px;
  height: 3.6666666667px;
  transition: .3s ease;
  position: relative;
}

<div class="centered">
  <div class="group">
    <input type="text" id="name" required="required" />
    <label for="name">Name</label>
    <div class="bar"></div>
  </div>
</div>

Answer 3

您的标签的位置绝对正确，因此您需要定义宽度才能使用text-align: center;。尝试以下方式：

label {
    position: absolute;
    top: 36.6666666667px;
    color: #2196f3;
    font: 400 36.6666666667px Roboto;
    cursor: text;
    transition: 0.3s ease;
    width: 100%;
    text-align: center;
}

或者，如果您对集合width有疑问，请尝试以下方法：

label {
    position: absolute;
    top: 36.6666666667px;
    color: #2196f3;
    font: 400 36.6666666667px Roboto;
    cursor: text;
    transition: 0.3s ease;
    left:0;
    right: 0;
    text-align: center;
}

Answer 4

将文本对齐标签的父级。

.group {
  width: 100%;
  height: 110px;
  overflow: hidden;
  position: relative;
  text-align: center;
}