button sotto immgini, in un set di immagini lighbox

[stardom]

non trovo una soluzione all'elementare (ed annoso) problema di inserire un button centrato sotto ogni immagine, in un set di thumbnails/immagini (allineate orizzontalmente) che poi si aprono con Lightbox. Semplifico il codice html+css qui di seguito, che invece mi allinea le immagini verticalmente:

<a href immagine 1><div button>
<a href immagine 2><div button>
<a href immagine 3><div button>

.button {width: 20px; margin: 0 auto;}

Data la domanda un po' nerd, mi aspetto una risposta veloce o nessuna risposta.

[tampertools]

Quel codice html non ha senso. Semplificalo un po' di meno

[stardom]

sono informazioni ridondanti, comunque

<a href="gallery/image1.jpg"><img src="gallery/thumbs/image1jpg" alt="" /></a><div class="buy"><a href="#four">buy</a></div>

.buy{
	width:20px;
	margin: 0 auto;
	padding:5px;
	color: #000;
	font-size:1em;
	background:#fff;
	background: rgba(255,255,255, 0.4);
	-webkit-border-radius: 2px; 
            border-radius: 2px; 
}

[tampertools]

Puoi provare a racchiudere ogni elemento in n contenitore:

<div class="contenitore">
    <a href="gallery/image1.jpg">
        <img src="gallery/thumbs/image1jpg" alt="" />
    </a>
    <div class="buy">
        <a href="#four">buy</a>
    </div>
</div>

.contenitore {
    /* Allinea orizzontalmente questo anziché l'immagine */
}
.buy {
    /* Va bene come l'hai scritto tu */
}

[stardom]

No, sono già dentro un contenitore e non funziona. E poi il button deve essere legato all'immagine, cioè ovunque metto l'immagine il button va con essa.

[tampertools]

Se non posti il codice completo come vedi non ti si può aiutare.

Puoi dare il link alla pagina?

[stardom]

la pagina è questa (la prima immagine) ma non ho postato il codice perchè cerco una soluzione che si applichi a qualsiasi contesto di un testo/button sotto un testo/immagine... che infatti sulla rete nessuno pare risolvere

[tampertools]

Questo è quello che vedo

<div class="tableCell" style="height: 438px;">
    <a href="gallery/IMG_4768.jpg">
        <img src="gallery/thumbs/IMG_4768.jpg">
    </a>
    <div class="buy">
        <a href="#four">buy</a>
    </div>
    <a href="gallery/IMG_4770.jpg">
        <img src="gallery/thumbs/IMG_4770.jpg">
    </a>
    <a href="gallery/IMG_4771.jpg">
        <img src="gallery/thumbs/IMG_4771.jpg">
    </a>
</div>

Questo è quello che ti ho detto di provare

<div class="tableCell" style="height: 438px;">
    <div class="contenitore">
​        <a href="gallery/IMG_4768.jpg">
            <img src="gallery/thumbs/IMG_4768.jpg">
​        </a>
​        <div class="buy">
​            <a href="#four">buy</a>​
        </div>
    </div>
    <div class="contenitore">
​        <a href="gallery/IMG_4770.jpg">
... ... ...

Per allinarle orizzontalmente puoi poi usare il float o il display inline sui div .contenitore

[stardom]

Tamper, non devo allineare orizzontalmente (quindi niente float o display inline), ma mettere un pulsante sotto tre immagini che, loro si, sono allineate con float.

| image | image | image |
| button | button | button |

E comunque non ho idea da dove hai preso quel class="tableCell".

[tampertools]

Non riesco a capire...

Non ti serve qualcosa così?
http://jsfiddle.net/Nicolo99/jCJg4/e...sult,html,css/