Ich habe also einen Kreis mit einer Nummer, die sich aufgrund von Benutzerdaten ändert. Wie würden Sie es schaffen, dass die Nummer immer zentriert ist, unabhängig davon, um welche Nummer es sich handelt?

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px
}

.TLP-blueBg {
  background-color: #2b88c7;
  transition: background-color 0.35s ease;
}

.Text {
  vertical-align: middle;
  display: inline-block;
  margin-top: 4px;
  position: absolute;
  left: 50%;
  margin-left: -2.15px;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}
<div class="Box">
  <p class="Text">1</p>
</div>
0
Will 17 Apr. 2018 im 19:40

7 Antworten

Beste Antwort

Sie können transform wie folgt verwenden:

CSS

.Text {
  display: inline-block;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50% , -50%);
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
  margin:0;
}

DEMO HIER

1
Luís P. A. 17 Apr. 2018 im 16:46

Sie können die Positionseigenschaft und auch andere unnötige CSS-Regeln entfernen. Versuchen Sie diesen Code.

.Text {
  display: inline-block;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 0;
}
0
Aryan Twanju 17 Apr. 2018 im 16:45

Entfernen Sie die Klasse position: absolute aus der Klasse .Text. Aufgrund dessen wurde der darin enthaltene Text nicht richtig ausgerichtet - wie gewünscht.

Hier ist das Arbeitsbeispiel: https://jsfiddle.net/qb9mxkhy/33/

Überprüfen Sie, ob dies auch funktioniert, wenn Sie 3 Ziffern in .Text haben.

0
Paritosh 17 Apr. 2018 im 16:45

Ändern Sie Ihr .Text CSS wie folgt:

.Text{
    vertical-align: middle;
    display: block;
    margin-top: 4px;
    font: 200 1.25em/1.3em 'Open Sans';
    color: white;
    text-align: center;
    width: 100%;
}
0
dukedevil294 17 Apr. 2018 im 16:46
.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px
}

.Text {
  vertical-align: middle;
  display: inline-block;
  margin-top: 4px;
  left: 50%;
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}

.task {
  width: 100%;
  height: 55px;
  cursor: pointer;
  background-color: white;
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
}
<div class="Box">
  <p class="Text">4</p>
</div>

Entfernen Sie die Position: absolut; und Rand links: -2,15px; aus der .text Klasse.

0
Harish ST 17 Apr. 2018 im 16:46

Im Klassentext:

.Text {
     text-align: center;/*add this line*/
     vertical-align: middle;
     display: inline-block;
     margin-top: 4px;
     /*remove*/
     /*this*/position: absolute;
     /*this*/left: 50%;
     /*and this*/margin-left: -2.15px;
     font: 200 1.25em/1.3em 'Open Sans';
     color: white;
 }
0
Fernando Bravo Diaz 17 Apr. 2018 im 16:47

Ich würde Ihnen den Flexbox Weg vorschlagen:

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px;
  
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
}

.Text {
  font: 200 1.25em/1.3em 'Open Sans';
  color: white;
}
<div class="Box">
  <p class="Text">1</p>
</div>

<div class="Box">
  <p class="Text">99</p>
</div>

<div class="Box">
  <p class="Text">404</p>
</div>
0
VXp 29 Sept. 2018 im 09:01