How to align the text in front of another element?

Asked

Viewed 368 times

4

I managed to round the edges of the div I’m just not able to align the text in front of the div.

My code is like this:

.boxEtapas {
  overflow: hidden;
}

.etapas {
  margin: 0 auto;
}

.etapas ul {
  list-style: none;
}

.etapas ul,
li {
  margin: 1px;
}

.redondo {
  border-radius: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
  height: 50px;
  width: 50px;
  border: 1px solid #000000;
  line-height: 1.0;
}

.redondoativo {
  border-radius: 100%;
  background-color: #337ab7;
  overflow: hidden;
  height: 50px;
  width: 50px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.0;
}

.textoEtapas {
  float: left;
}
<div class="col-sm-6 boxEtapas" align="center">
  <div class="etapas">
    <ul>
      <li>
        <div class="redondoativo">
          <br>1</div>
        <div class="textoEtapas">Informações Cadastrais</div>
      </li>
      <li>|</li>
      <li>
        <div class="redondo">
          <br>2</div>
        <div class="textoEtapas">Selecionar Assinatura</div>
      </li>
      <li>|</li>
      <li>
        <div class="redondo">
          <br>3</div>
        <div class="textoEtapas">Forma de Pagamento</div>
      </li>
    </ul>
  </div>
</div>

css

  • Put the CSS code you made in there for us to stay in.

  • Ready put.

  • Ever tried to put float: left; in the classes .redondoativo and .redondo?

  • Just take the <br> before the number. Then put line-height: 50px in place of 1.0

  • I’ve put the floa left but it gets more messy Brunoromualdo

3 answers

7

The alignment issue, can have a single element (a paragraph, for example) and use pseudo elements to create those dots with the number in front:

.steps p {
  counter-increment: items /* contador de steps */
}

.steps p::before {
  border-radius: 50%;
  border: 1px solid #333;
  content: counter(items);
  display: inline-block;
  padding: 8px 16px;
  margin-right: 15%; /* distancia do circulo p/ o texto */
  pointer-events: none
}

.steps p.selected::before {
  border-color: #3D8EB9;
  background: #3D8EB9;
  color: #fff
}
<div class='steps'>
  <p class='selected'>Informações Cadastrais</p>
  <p>Selecionar Assinatura</p>
  <p>Forma de Pagamento</p>
</div>

If you want the dots on the right, just change the rule to .steps p::after and change the margin-right for margin-left.

4


.boxEtapas {
  overflow: hidden;
}
.etapas {
  margin: 0 auto;
}
.etapas ul {
  list-style: none;
}
.etapas ul,
li {
  margin-bottom: 15px;
  width: 100%;
  display: table;
  line-height: 50px;
}
.redondo {
  border-radius: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
  height: 50px;
  width: 50px;
  border: 1px solid #000000;
  line-height: 50px;
  float: left;
}
.redondoativo {
  background-color: #337ab7;
  color: #FFFFFF;
}
.textoEtapas {
  float: left;
  text-indent: 20px;
}
<div class="col-sm-6 boxEtapas" align="center">
  <div class="etapas">
    <ul>
      <li>
        <div class="redondo redondoativo">1</div>
        <div class="textoEtapas">Informações Cadastrais</div>
      </li>
      <li>
        <div class="redondo">2</div>
        <div class="textoEtapas">Selecionar Assinatura</div>
      </li>
      <li>
        <div class="redondo">3</div>
        <div class="textoEtapas">Forma de Pagamento</div>
      </li>
    </ul>
  </div>
</div>

  • Thanks Gumball was better aligned the numbers inside the div but did not solve the problem ;) the text is still below as in the image!

  • But what’s the problem? You said I am unable to align the text in front of the <div>... What it really means ?

  • put the text that is inside the class textEtapas in front of the "ball" rs

  • Production, again -1.

  • The answer is okay, only one missing text-align: center in that rule .redondo for text to get in the middle of the ball. + 1

4

In his css add a height to their li thus:

.etapas ul li{
    height:30px;
}

And in the classes .redondo and .redondoativo put a float:left. To finish leave your class .textoEtapas thus: 

.textoEtapas{
    height:30px;
    line-height:50px;
    float: left;
}

Take a look at this example of what I did on Codepen.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.