How to align the text in front of another element?

Question

How to align the text in front of another element?

Navigation

#1 by (7 votes)
#2 by (4 votes)
#3 by (4 votes)

4

I was able to round the edges of the div just not being able to align the text in front of the div.

My code looks 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

asked by anonymous 02.12.2016 / 16:40

3 answers

7

The alignment issue can have a single element (a paragraph, for example) and use pseudo elements to create those marbles 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 balls on the right side, just change the rule to .steps p::after and change the margin-right to margin-left .

02.12.2016 / 17:07

4

In your css add a height to your li like this:

.etapas ul li{
    height:30px;
}

And in classes .redondo and .redondoativo put float:left . To conclude leave your class .textoEtapas like this:

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

Take a look at this example of what I did in CodePen .

02.12.2016 / 17:14

How do I get the $ _GET value of a URL in CodeIgniter How to insert an element between two elements?

score 4 · Accepted Answer

.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>