Align span right inside div

Question

Align span right inside div

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (3 votes)

6

I'm wondering how to align a text within the span by example:

This is my HTML

Ineedtoleaveitlikethis,right-alignedleft-handtextandleft-alignedright-handtext,asanexample:

HTML:

<divclassName="viewInstrument-output">
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">PROG. DEGELOS</span>
        </div>
        <div>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Ativo</label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">SAÍDAS</span>
        </div>
        <div>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Refrigeração</label>
            <label className="viewInstrument-output-status-activated viewInstrument-output-status">Defrost</label>
            <label className="viewInstrument-output-status-deactivated viewInstrument-output-status">Fans</label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">TEMP. DE CONTROLE</span>
         </div>
        <div>
            <label>-5.0<sup>°c</sup></label>
        </div>
    </div>
    <div className="outputs">
        <div>
            <span className="viewInstrument-output-title viewInstrument-font">DIFERENCIAL</span>
        </div>
        <div>
            <label>3.0<sup>°c</sup></label>
        </div>
    </div>
</div>

html css

asked by anonymous 16.05.2017 / 13:59

3 answers

5

It is possible to use display: table , and defining rows and columns, to be tabulated, and then to align the texts of each column.

Example

#tabela {
  display: table;
  background-color: gray;
  color: #fff;
}

.linha {
  display: table-row;
}

.coluna1 {
  display: table-cell;
  padding-right: 40px;
  padding-bottom: 10px;
  text-align: right;
}

.coluna2 {
  display: table-cell;
  padding-bottom: 10px;
  text-align: left;
  border: 1px solid #000;
  border-radius: 20px;
  border-color: #fff;
  background-color: #ccc;
  color: #fff;
  font-weight: bold;
}

<div id="tabela">
  <div class="linha">
    <div class="coluna1">Prog. Degelos</div>
    <div class="coluna2">Ativo</div>
  </div>
  <div class="linha">
    <div class="coluna1">Saídas</div>
    <div class="coluna2">Refrigeração - Defrost</div>
  </div>
  <div class="linha">
    <div class="coluna1">Temp. de controle</div>
    <div class="coluna2"> -5.0</div>
  </div>
</div>

16.05.2017 / 14:12

3

The first thing you need to do is set a width for the div with the titles and for the tags. Then you can use the css text-align.

heml, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: DarkSlateGray;
}

.linha:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

.linha .celula {
  float: left;
  height: 40px;
  line-height: 40px;
}

.conteudo {
  width: calc(100% - 150px);
}

.titulo {  
  width: 150px;  
  text-align: right;  
  font-size: 12px;
}

.info {
  font-size: 25px;
  line-height: 30px;
}

.info, .titulo {
  box-sizing: border-box;
  font-weight: bold;
  padding: 0px 5px;
  color: white;
}

.tag {
  box-sizing: border-box;
  height: 28px;
  width: 100px;
  margin: 6px 5px;
  padding: 5px;
  line-height: 20px;
  float: left;
  border: 1px solid white;
  border-radius: 10px;
  background-color: teal;
  color: white;
  text-align: center;
}

<div>
    <div class="linha">
        <div class="celula titulo">
            <span>PROG. DEGELOS</span>
        </div>
        <div class="celula conteudo">
            <div class="tag">Ativo</div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>SAÍDAS</span>
        </div>
        <div class="celula conteudo">
            <div class="tag">Refrigeração</div>
            <div class="tag">Defrost</div>
            <div class="tag">Fans</div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>TEMP. DE CONTROLE</span>
        </div>
        <div class="celula conteudo">
            <div class="info">-5.0<sup>°c</sup></div>
        </div>
    </div>
    <div class="linha">
        <div class="celula titulo">
            <span>DIFERENCIAL</span>
        </div>
        <div class="celula conteudo">
            <div class="info">3.0<sup>°c</sup></div>
        </div>
    </div>
</div>

16.05.2017 / 14:28

When to use const and when to use #define What are the differences between Java SE, Java EE and Java ME?

score 3 · Accepted Answer

One way to do this would be to rearrange your HTML like this:

body {
  background: #333;
  color: #fff;
  font-family: sans-serif;
}

#labels {
  text-transform: uppercase;
  text-align: right;
  margin-right: 20px;
}

button {
  text-transform: uppercase;
  margin: 0 5px;
  border: none;
  background: #075E56;
  padding: 0 10px;
  border-radius: 10px;
  color: #fff;
}

.data {
  float: left;
}

.data p {
  line-height: 1rem;
  min-height: 21px;
}

<div id="labels" class="data">
  <p>Prog. Degelos</p>
  <p>Saídas</p>
  <p>Temp. de Controle</p>
  <p>Diferencial</p>
</div>

<div id="button" class="data">
  <p><button>Ativo</button></p>
  <p><button>Refrigeração</button><button>Defrost</button><button>Fans</button></p>
  <p>-5.0ºC</p>
  <p>3.0ºC</p>
</div>