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):
codice:
<!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.