Problema centratura box div

[ZeroShift]

Premetto che non sono un cultore di HTML, anche se di solito me la riesco a sfangare abbastanza bene.
Ho però un problema che mi sta facendo rognare, sono alle prese con un template già preimpostato strutturato come segue:
Immagine.jpg

Col seguente codice:

<!-- page header -->
<section id="page-header" class="team">
    <div class="container clearfix">
        <hgroup>
            <h1 class="page-title">Artists</h1>
            <h2 class="page-subtitle">Meet our artists.</h2>
        </hgroup>
        <!-- share it -->
        <div id="share-wrap">
            <div id="share" data-url="artists2.html" data-text="Artists" data-title="share"></div>
        </div>
        <!-- /share it -->
        <hr>
        <!-- masonry boxes -->
        <div class="masonry-wrap clearfix">
            <div class="masonry width-1-4 height-1-2">
                <a href="artist.html" class="thumb-icon tip" data-tip-title="DJ Envato" data-tip-desc="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc consectetur eros eget lacus fringilla in feugiat odio viverra.">
                    <img src="placeholders/01-artist-image-233x468.jpg" alt="" title="This is an example of a caption" />
                    <span class="icon plus"></span>
                </a>
            </div>
            <div class="masonry width-1-4 height-1-2">
                <a href="artist2.html" class="thumb-icon tip" data-tip-title="DJ Themeforest" data-tip-desc="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc consectetur eros eget lacus fringilla in feugiat odio viverra.">
                    <img src="placeholders/02-artist-image-233x468.jpg" alt="" title="This is an example of a caption" />
                    <span class="icon plus"></span>
                </a>
            </div>
            <div class="masonry width-1-4 height-1-2">
                <a href="artist.html" class="thumb-icon tip" data-tip-title="DJ Graphicriver" data-tip-desc="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc consectetur eros eget lacus fringilla in feugiat odio viverra.">
                    <img src="placeholders/03-artist-image-233x468.jpg" alt="" title="This is an example of a caption" />
                    <span class="icon plus"></span>
                </a>
            </div>
            <div class="masonry width-1-4 height-1-2">
                <a href="artist2.html" class="thumb-icon tip" data-tip-title="DJ Videohive" data-tip-desc="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc consectetur eros eget lacus fringilla in feugiat odio viverra.">
                    <img src="placeholders/04-artist-image-233x468.jpg" alt="" title="This is an example of a caption" />
                    <span class="icon plus"></span>
                </a>
            </div>
        </div>
        <!-- /masonry boxes -->
    </div>
</section>
<!-- /page header -->

Ora, come si può notare, ci sono 4 box selezionabili, a me ne servono 5. Ho provato ovviamente ad aggiungerne semplicemente uno, ma me lo mette a capo, sotto gli altri. Smanettando un pò sono riuscito a ottenerne 5 in linea ma stavolta il problema era che erano tutti spostati a sinistra e quindi non centrati.
Qualcuno sa indirizzarmi verso la retta via per ottenere 5 caselle in linea e centrate?
Grazie in ogni caso.

EDIT: il comando <center> ovviamente non è stato di aiuto.

[KillerWorm]

Dal codice html che hai postato non si può capire esattamente la causa del problema. Servirebbe vedere il resto del codice, in particolare il css, oppure la pagina pubblica.

Presumo comunque che dipenda dalla larghezza fissa del div che contiene i box.
Puoi provare a inserire immagini con una larghezza minore (che in totale rientrino nella larghezza del contenitore), oppure forzare la larghezza attraverso la proprietà width sul tag img o agendo da css (preferibile).
Ad ogni modo è possibile che altre regole css influiscano sulla dimensione dei box e/o dei vari elementi da cui sono costituiti.
Perciò ripeto, per capire esattamente dove intervenire, sarebbe necessario, o quantomeno sarebbe più semplice, vedere la pagina pubblica.

[ZeroShift]

Dal codice html che hai postato non si può capire esattamente la causa del problema. Servirebbe vedere il resto del codice, in particolare il css, oppure la pagina pubblica.

Presumo comunque che dipenda dalla larghezza fissa del div che contiene i box.
Puoi provare a inserire immagini con una larghezza minore (che in totale rientrino nella larghezza del contenitore), oppure forzare la larghezza attraverso la proprietà width sul tag img o agendo da css (preferibile).
Ad ogni modo è possibile che altre regole css influiscano sulla dimensione dei box e/o dei vari elementi da cui sono costituiti.
Perciò ripeto, per capire esattamente dove intervenire, sarebbe necessario, o quantomeno sarebbe più semplice, vedere la pagina pubblica.

Intanto grazie per la risposta, sto lavorando esclusivamente in locale quindi ci vuole un pò prima che metto tutto online, in ogni caso stavo proprio guardando il css e mi sono imbattuto in questo:

    .masonry-wrap { 
        margin-bottom: 40px;
        overflow: hidden;
    }    
    .masonry {
        margin: 1px 1px;
        float: left;
        overflow: hidden;
    }
    .masonry img { margin: 0; max-width: 100%; max-height: 100% }

    .masonry.width-1-4 { width: 233px; }
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 468px; }
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }

    /* Info box */
    .masonry .text-box {
        background-color: #0b0b0b;
        overflow: hidden;
        height: 100%
    }
    .masonry .text-box .inner {
        margin: 40px 30px;
    } 
    .masonry .text-box hgroup {
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

A sto punto mi chiedo però su quale parametro debba intervenire, purtroppo non posso permettermi di ridurle in larghezza perché poi dentro ci sarà del testo.
Se anche con questi dati non si riesce a cavar fuori niente metto un link alla pagina online.

[KillerWorm]

purtroppo non posso permettermi di ridurle in larghezza perché poi dentro ci sarà del testo.

Ok. Però, se l'elemento contenitore principale ha una dimensione fissa (immagino sia così), puoi capire da te che non puoi far altro che ridurre la larghezza dei box/immagini per farci stare un ulteriore box. Che sia poi agendo direttamente sul file immagine o da proprietà html o dal css, il discorso non cambia.

Potresti provare ad agire da css. In base alle regole applicate sui box (mi riferisco a <div class="masonry width-1-4 height-1-2">
), potresti provare ad apportare queste modifiche:

    .masonry.width-1-4 { width: 186px; } /* anziché 233px */
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 374px; } /* anziché 468px */
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }

Chiaramente, se altri elementi sulla pagina utilizzano tali regole, queste saranno applicate indistintamente. Per cui fai tu le dovute considerazioni.

Inoltre mi pare di capire che tu stia lavorando su un template responsive. In tal caso dovresti assicurarti se, effettuando eventuali modifiche a quei singoli elementi, non si vada a sfasciare in qualche modo la struttura nelle altre risoluzioni, e quindi compromettere il funzionamento del responsive.

[ZeroShift]

Ok. Però, se l'elemento contenitore principale ha una dimensione fissa (immagino sia così), puoi capire da te che non puoi far altro che ridurre la larghezza dei box/immagini per farci stare un ulteriore box. Che sia poi agendo direttamente sul file immagine o da proprietà html o dal css, il discorso non cambia.

Potresti provare ad agire da css. In base alle regole applicate sui box (mi riferisco a <div class="masonry width-1-4 height-1-2">
), potresti provare ad apportare queste modifiche:

    .masonry.width-1-4 { width: 186px; } /* anziché 233px */
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 374px; } /* anziché 468px */
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }

Chiaramente, se altri elementi sulla pagina utilizzano tali regole, queste saranno applicate indistintamente. Per cui fai tu le dovute considerazioni.

Inoltre mi pare di capire che tu stia lavorando su un template responsive. In tal caso dovresti assicurarti se, effettuando eventuali modifiche a quei singoli elementi, non si vada a sfasciare in qualche modo la struttura nelle altre risoluzioni, e quindi compromettere il funzionamento del responsive.

Mi sa che dovrò ridurre le immagini, ho provato col tuo sistema e sembra funzionare, almeno nel primo nanosecondo in cui la pagina si carica vedo tutti i box allineati e più piccoli, però poi dopo un attimo il quinto box torna sotto e soprattutto a grandezza normale.
Sto diventando matto, ho pronto tutto il sito e mi manca solo sta cavolata!

[ZeroShift]

Buongiorno, riesumo questa discussione perchè mi si è presentato un problema legato proprio a queste modifiche suggerite sopra, praticamente andando a restringere le immagini come riportato sopra, mi si restringono anche un sacco di altre immagini (proprio altri file, non parlo della stessa immagine linkata) qua e la nel sito, probabilmente perchè seguono la stessa regola, ora mi chiedo quale sia il sistema per far si che la modifica si estenda solo a quella pagina e non al resto del sito, qualcuno gentilmente mi aiuta?

[KillerWorm]

Ciao, è proprio come pensi. Quelle stesse regole sono applicate evidentemente ad altri elementi all'interno del sito, cioè nelle pagine che fanno riferimento a quello stesso css.

Puoi risolvere in vari modi. Dovrai comunque differenziare le regole con le modifiche da quelle con i valori "originari", in modo che sugli elementi interessati siano applicate le regole modificate e viceversa sugli altri elementi.

Puoi usare una diversa classe sugli elementi interessati.
Oppure puoi specificare in modo più mirato il selettore che determina tali regole.
Se invece si tratta di un file css esterno puoi specificare le "nuove" regole come css incluso nell'head della pagina. Questo dovrebbe "sovrascrivere" le regole che invece stanno nel file esterno.

Nel caso, puoi postare un link alla pagina/sito pubblico? Sarebbe più semplice aiutarti.