How to center the label text

Question

I tried margin, top,left... and text-align but nothing work.

This is my code:

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>

Could you please be more precise about what you are trying to achieve? Maybe explain what your end-result should look like. — Ian Rehwinkel, Jul 30 '18 at 07:59

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You missed text-align: center; width: 100%; for label. Now it works.

Snippet

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>

please stop using *tidy* automatically, you are screwing a lot of codes ... tidy is not always good, please test the code before and after — Temani Afif, Jul 31 '18 at 13:25
I am refering to this question : https://stackoverflow.com/questions/51614345/how-to-get-multiple-containers-height-the-same-with-height-auto check the code before and after the edit to see the mistake you have done ... tidy is not good — Temani Afif, Jul 31 '18 at 13:55

score 1 · Answer 2 · answered Jul 30 '18 at 08:00

You just need to give your label:

text-align: center;
width: 100%;

Because text-align will align the text according to the width, and the width needs to be 100% so it can be centered.

Demo:

This is a working demo snippet:

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>

score 1 · Answer 3 · answered Jul 30 '18 at 08:00

Your label is positioned absolutely so you need to define width to work text-align: center;. Try following way:

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

Or If you have issue with set width then try with following way:

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

score 0 · Answer 4 · answered Jul 30 '18 at 07:59

0

Put text align in label's parent.

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

answered Jul 30 '18 at 07:59

stellyrepsolka

53
9

How to center the label text

4 Answers4

Snippet