Centrare orizzontalmente 2 Div all'interno di un contenitore

[Poulo]

Buongiorno a tutti,
avrei bisogno d'aiuto

All'interno di una pagina che sto disperatamente cercando di rendere responsive, dove prima avevo una bella tabella centrata, con 2 celle affiancate ognuna contenente testo allineato a sinistra,
ora sto cercando di ottenere lo stesso risultato visivo con css e div su desktop, ma che sia responsive su piccoli schermi.

Cerco di spiegarmi meglio:
ho creato un div contenitore, all'interno ho messo altri 2 div affiancati contenenti il testo:
ebbene i 2 div si sovrappongono su piccoli schermi e va bene, su desktop sono giustamente affiancati ma tutti sulla sinistra della pagina, io li vorrei centrati i div, ma il testo al loro interno allineato a sinistra

Ecco il codice

    <div class="contenitore" style="display: inline-block; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto">
<div style="display: inline-block; margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<B><U>Vixin a-o Bambin</U><br>
Chì davanti a-o Presepio, c&auml;o Bambin,<br>mì me ghe incanto<br>pròprio cômme in ninnin...</B>
</div>
<div style="display: inline-block; margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<U>Vicino al Bambino</U><br>
Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
</div>
    </div>

Grazie a chi può aiutarmi

[KillerWorm]

Ciao, risposta breve: metti text-align:center sul div contenitore e text-align:left sui due div interni.


- Risposta lunga:

Chiaramente puoi risolvere in vari modi (vedi qui https://css-tricks.com/centering-css-complete-guide/).
Ad esempio, dal momento che hai impostato i due div come elementi inline-block, devi tenere presente che questo fa in modo di inserirli all'interno del flusso del testo e, per tale motivo, potresti sfruttare questa caratteristica per allinearli usando la proprietà text-align che dovrai ovviamente applicare al contenitore. Tieni conto che tale proprietà è ereditaria (nel tuo caso verrà ereditata dai due div figli) per cui dovrai reimpostarla opportunamente anche per i due div se ti serve allineare il relativo testo a sinistra.

A parte questo, vedendo come hai organizzato il tutto nell'esempio da te postato, ho la sensazione che il concetto di sito responsive sia ancora un bel po' lontano, qui mancano proprio delle basi per un buono sviluppo del web-design. Non fraintendermi, non voglio assolutamente demoralizzarti ma, se posso, ti darei qualche altro consiglio per alzare il tiro.

Qualche punto da considerare:

1) Mantenere lo stile separato dal contenuto

Nel tuo esempio stai usando l'attributo style per applicare tutto il CSS direttamente in-linea sui tag; cosa che andrebbe evitata, per quanto possibile, a favore invece di un CSS incluso nel documento (definito quindi all'interno del tag head, o incluso come file esterno).

Con un CSS separato dai contenuti, avrai diversi vantaggi tra cui: evitare duplicazioni; rendere la modifica e la manutenzione più semplice; applicare allo stesso contenuto stili diversi per diversi scopi.

Vedi: https://developer.mozilla.org/it/doc...A9_usare_i_CSS

Se poi parliamo di "responsive design", questi accorgimenti devono essere tenuti bene in considerazione, dal momento che presumibilmente ti troverai a dover fare uso di media query per definire gli eventuali breakpoints del layout, cosa che non può essere fatta col CSS in-linea.

Vedi:
https://it.wikipedia.org/wiki/Design_responsivo
http://www.html.it/pag/32823/definir...media-queries/

2) Mantenere il contenuto separato dallo stile

Nel tuo esempio stai usando dei tag HTML a solo scopo presentazionale; vedi quel <B> usato per evidenziare il testo sul primo div e quel <U> usato per definire relativamente il titolo dei due contenuti. In generale il loro uso non è vietato, chiaramente, ma in casi come questo sarebbe meglio usare il CSS per evidenziare un intero blocco di testo (come per il tuo primo div) e un tag più appropriato per definire i titoli (vedi l'uso di elementi h1-h6).

Qui un esempio di come potrebbe essere improntata la cosa (è giusto un esempio):

<!DOCTYPE HTML>
<html>
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
         .contenitore {
            display: inline-block;
            width: 100%;
            font: 17px "Times New Roman", Georgia, serif;
            color: #000080;
            text-align: center;
         }

         .area-testo {
            display: inline-block;
            max-width: 100%;
            margin: 0 auto;
            padding-left: 5px;
            text-align: left;
         }

         .area-testo>h3 { 
            text-decoration: underline;
         }

         .testo-originale {
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <h1>Titolo della pagina</h1>

      <div class="contenitore">
         <h2>Titolo della sezione</h2>

         <div class="area-testo testo-originale">
            <h3>Vixin a-o Bambin</h3>
            <p>Chì davanti a-o Presepio, c&auml;o  Bambin,<br>mì me ghe incanto<br>pròprio cômme in  ninnin...</p>
         </div>

         <div class="area-testo testo-tradotto">
            <h3>Vicino al Bambino</h3>
            <p>Qui davanti al Presepe, caro Bambino,<br>io  mi ci incanto<br>proprio come un bambino...</p>
         </div>

      </div>
   </body>
</html>

Non mi dilungo ulteriormente in altri particolari per non andare troppo fuori tema ma, per ulteriori informazioni riguardo questo argomento ed altri legati al responsive design e in generale al corretto sviluppo di codice CSS, può esserti utile dare uno sguardo tra i link utili CSS, se già non lo hai fatto.

Chiaramente i miei sono solo dei consigli, poi vedi tu come meglio preferisci impostare il tutto.

Buon proseguimento.

[Poulo]

Ciao. Innanzittutto GRAZIE per avermi risposto! E poi GRAZIE per la lunga e dettagliata risposta.

Ho applicato la risposta breve e già ho risolto quello che in tutto il pomeriggio e sera di ieri non riuscivo a fare

1) Mantenere lo stile separato dal contenuto

Uso gi� i Css in documenti separati che richiamo nella head del file.html
in questo caso ho voluto metterli nel documento per maggiore chiarezza di esposizione, e poi avevo paura che altre regole contenute nel css esterno influissero, visto che alcune sono ereditarie e a volte mi fanno impazzire, inoltre alcuni comandi come !important; ancora non l'ho ben capito.

2) Mantenere il contenuto separato dallo stile
Nel tuo esempio stai usando dei tag HTML a solo scopo presentazionale; vedi quel <B> ...

Quando ho creato il sito, nel 2001, forse i css ancora non esistevano: all'epoca mi son studiato l'HTML da zero ed ho cominciato col blocco note (per avere codice 'pulito') a fare le mie pagine, in seguito ho aggiunto javascript, qualche css, ecc.

Ultimamente sto cercando di trasformare il sito da layout fisso a responsive, ma non è facile impostare per le varie dimensioni di schermo.
La bozza di pagina su cui sto lavorando e' questa

Avevo dato un'occhiata ai "link utili CSS", prima avevo cercato e studiato varie pagine sul web, ma non riuscivo.

Ancora Grazie per i tuoi consigli!

Ciao

[SoloWiFi]

div contenitore: align="center" style="display:table"

Altri div all'interno: style="float:left"

[Poulo]

SoloWiFi ho provato come dici tu, ma non vengono centrati e ravvicinati nella visualizz desktop, ma i 2 Div sono alle estremità opposte dello schermo

    <div class="contenitore" align="center" style="display: table; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto;">
<div style="float:left;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<B><U>Vixin a-o Bambin</U><br>
Chì davanti a-o Presepio, c&auml;o Bambin,<br>mì me ghe incanto<br>pròprio cômme in ninnin....</B>
</div>
<div style="float:right;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<U>Vicino al Bambino (Gesù)</U><br>
Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
</div>
    </div>

Anche mettendo a tutti e 2 i Div float:left vengono entrambi a sinistra.
La soluzione "giusta" è quella di KillerWorm.

Ti ringrazio cmq della risposta
Ciao

[Poulo]

KillerWorm scusa abuso della tua gentilezza...

funziona tutto ottimamente, l'ho testato su Mozilla Firefox 57.0.2 e su Chrome 62.0,
ma su I.Explorer 11.0 i 2 div non si sovrappongono restringendo la finestra

se tolgo questa riga di codice

<div  align="center"><img src="dena/pranso.gif" oncontextmenu="return  false" ondragstart="return false"  class="responsive"></div>

allora funziona anche su I.E.

Ma com'é possibile?

[Poulo]

Ho risolto!
Il problema era sulla classe responsive dell'immagine,
nel css avevo messo

.img-responsive {
max-width: 100%; height: auto; display: block;
}

ho tolto il "max-" davanti a width
ora funziona.

[KillerWorm]

[SoloWiFi]

bastava centrare il div contenitore

SoloWiFi ho provato come dici tu, ma non vengono centrati e ravvicinati nella visualizz desktop, ma i 2 Div sono alle estremità opposte dello schermo

    <div class="contenitore" align="center" style="display: table; margin: 0 auto;font-family: Times new roman; font-size: 17px; color: #000080; width: 100%; height: auto;">
<div style="float:left;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<B><U>Vixin a-o Bambin</U><br>
Chì davanti a-o Presepio, c&auml;o Bambin,<br>mì me ghe incanto<br>pròprio cômme in ninnin....</B>
</div>
<div style="float:right;  margin: 0 auto; padding-left: 5px; max-width: 100%; vertical-align: top;">
<U>Vicino al Bambino (Gesù)</U><br>
Qui davanti al Presepe, caro Bambino,<br>io mi ci incanto<br>proprio come un bambino...
</div>
    </div>

Anche mettendo a tutti e 2 i Div float:left vengono entrambi a sinistra.
La soluzione "giusta" è quella di KillerWorm.

Ti ringrazio cmq della risposta
Ciao