Allineare al centro e a destra sulla stessa riga

**ResianTaxidrive** · 06-07-2010, 10:54

te credo, uno span non ha dimensioni, se non ci sono larghezze occupa un certo spazio e basta. dovrest dare un display:block e una larghezza che presumo dovrebbe corrispondere alla larghezza della cella. e visto che entrambi gli span avranno le stesse caratteristiche eccezion fatta per l'allineamento, dovranno sovrapporsi e quindi gli metteri un position:absolute. prova, io non ho provato ma qualcosa dovrebbe venirti fuori.

cmq mi sembra strana la cosa, questo doppio allineamento, perchè una cosa del genere?

**Mich_** · 07-07-2010, 08:55

Resian ha ragione nella diagnosi, un po' meno nella soluzione.

In effetti uno <span> e` un oggetto inline, e non puo` avere dimensioni. Pero` trasformando ambedue in block non credo sia la soluzione piu` adatta allo scopo.
Il posizionamento assoluto puo` andare in alcuni casi, ma potrebbe introdurre effetti collaterali difficili da gestire.

Io vedrei una cosa di questo tipo:

codice:

HTML:
<p class="unicaRiga">                                     
  <span class="margine_d>Testo2</span>
  <span class="centrato">Testo1</span>     
</p>

CSS:
.unicaRiga {
  width: 100%;       /* necessario altrimenti i margini all'interno non hanno effetto */
                                /* occorre che il contenitore abbia larghezza definita (oppure 100% - ricorsivo) */
}
.unicaRiga .margine_d {
  float; right;          /* prima flotto a destra il pezzo di destra */
}
.unicaRiga .centrato {
  margin: 0 auto;   /* margini uguali a destra e sinistra */
}

**ResianTaxidrive** · 07-07-2010, 12:38

ammetto che non è il modo migliore (anche perchè le tabelle si comportano diversamente da un normale div) però se non altro funziona.
Poi provo anche col sistema di Mich

codice:

#cont {
	background-color: #CC6600;
	height:30px;
	width: 300px;
	position:relative;
}
span{
  display:block;
}
.uno{
  width:300px;
  text-align:center;
  position:absolute;
  top:10px;
}
.due{
  width:300px;
  text-align:right;
  position:absolute;
  top:10px;
}
-->
</style>
</head>
<body>
<table>
  <tr>
    <td id="cont"><span class="uno">pippo plutp</span><span class="due">pippo
        plutp</span></td>
  </tr>
</table>
</body>

Discussione: Allineare al centro e a destra sulla stessa riga

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio