[Risolto][CSS] Come posizionare testo all'interno del div

[TommyB1992]

Non sapevo dove aprire la discussione, questa mi è sembrata la più corretta...

Ho questa pagina: http://s17.postimg.org/3mov1dijj/Screen ... _36_36.png

Questo è un css approssimativo (tralasciate il fatto che è disordinato, quando funziona tutto ci penso a sistemarlo):

Codice: Seleziona tutto

<style>
    .block-green {
      height: 120px;
      width: 120px;
      background-color: #42B521;
      margin-left: 5px;
      display: inline-block;
      
    }
    
    .block-orange {
      height: 120px;
      width: 120px;
      background-color: orange;
      margin-left: 5px;
      display: inline-block;
      
    }
    
    .block-red-long {
      height: 120px;
      width: 248px;
      background-color: #F80D0D;
      margin-left: 5px;
      display: inline-block;
      
    }
    

    .block-green i, .block-orange i, .block-red-long i {
      font-size: 70px;
      padding-left: 30px;
    }
    
    .block-green span, .block-orange span, .block-red-long span {
      
    }


</style>


<!-- [...] -->

        <div class="block-green"><i class="fi-widget"></i><span>dsdsadsd</span></div>
 
          <div class="block-orange"><i class="fi-wrench"></i><span>dsadsa</span></div>

        <div class="block-red-long"><i class="fi-alert"></i><span>dsadsadsasadddddddddddddddddddddddddddddddddddddd</span></div>

Come cambio la posizione degli span o la loro lunghezza (impostando diversi "margin" e "font-size") mi sputt**na tutte le posizioni dei div.

Come devo risolvere?

[Zoff]

Ma il risultato desiderato quale sarebbe?

[TommyB1992]

Ma il risultato desiderato quale sarebbe?

Così:
http://s17.postimg.org/fixab7i1r/Screen ... _59_51.png

Ma ho risolto provando a caso l'attributo "absolute".