6

Estou com dúvida como alinhar um texto dentro do span conforme exemplo:

Esse é o meu HTML

inserir a descrição da imagem aqui

Preciso deixar ele assim, texto da esquerda alinhado a direita e texto da esquerda alinhado na direita, conforme exemplo:

inserir a descrição da imagem aqui

HTML:

<div className="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>
2
  • Tem como postar o código CSS que formata estre trecho também? E o que seria o atributo className nos elementos no HTML? Esse atributo não existe por padrão no HTML. Não seria apenas class?
    – Woss
    Commented 16/05/2017 às 12:06
  • É porque estou usando o reactJS. Commented 16/05/2017 às 13:19

3 Respostas 3

5

É possível usando display: table, e definindo linhas e colunas, para ficar tabulado, e então alinhar os textos de cada coluna.

Exemplo

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

1
  • utilizar o flow-root é um tanto quanto ariscado, espero que o AP não copie esta parte do seu CSS ;D Commented 16/05/2017 às 12:30
3

Uma forma de fazer seria reorganizando seu HTML desta forma:

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>

8
  • 1
    +1 Utilizar duas colunas e aplicar line-height: 1rem; no conteúdo é uma solução bem melhor que a minha. Commented 16/05/2017 às 12:33
  • @TobiasMesquita A sua solução é muito boa também, mas eu só uso tabelas como última possibilidade. Haha... Commented 16/05/2017 às 12:39
  • Eu quis aproveitar o HTML dele ;D já estava com cara de grid mesmo. Commented 16/05/2017 às 12:41
  • @TobiasMesquita Opa. Confundi a sua solução com a primeira.Está com muitas respostas. A sua eu vi agora. Sim, a sua tem a vantagem dele manter a organização dele. Commented 16/05/2017 às 12:42
  • resolvi pegar a do Leon para deixar mais organizado as labels e os buttons, de qualquer forma as duas foram excelente, obrigado. Commented 16/05/2017 às 12:55
3

a primeira coisa que você precisa fazer, é definir uma largura para a div com os titulos e para as com as tags. Então você pode usar o 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .