[HTML] Problema centrare elemento orizzontalmente

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Salve ho seguito i consigli della guida del sito per centrare un elemento orizzontalmente, ma non si posiziona al centro. Quali possono essere dei metodi alternativi per centrare orizzontalmente un'immagine all'interno di un div?

Grazie per l'attenzione
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.402
338
83
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#div-contenitore {
    background-color: #FCFFAA;
    margin: 0px;
    padding: 20px;
    height: 282px;
    width: 238px;
    border: 3px solid #000000;
}
#div-immagine {
    height: 256px;
    width: 192px;
    padding: 0;
    margin: 0 auto;
}
</style>
</head>

<body>
<div id="div-contenitore">
  <div id="div-immagine">
      <img src="36365.jpg" width="192" height="256" alt=""/>
  </div>
</div>
</body>
</html>

DEMO
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Purtroppo non ottengo il risultato desiderato con "margin: 0 auto"
L'immagine rimane sul bordo sinistro.
Codice:
<div id="topbar">
            <header>
                <img id="logo" alt="Gelateria 90" src="../images/G90-icon.jpg">
            </header>
        </div>


 /*mentre il css è questo:*/
#topbar {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:90px;
}

 #logo{
    margin: 0 auto;
}
 

Allegati

  • Cattura.PNG
    Cattura.PNG
    12,9 KB · Visite: 210

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.402
338
83
Non ottieni risultati perchè non metti nel css in logo le misure dell'immagine! Se tu guardi il mio codice ci sono e vedi anche la demo.
Le misure dovrebbero essere messe anche nel tag <img>
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
No guardi che le ho messe.
Però non so perché rimane sempre a sinistra.
908c4aa16445636dd71cb30975fda6bf.jpg


Inviato dal mio RNE-L01 utilizzando Tapatalk
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.402
338
83
Nel codice che hai postato nel post precedente non ci sono ed è diverso da quest'ultimo! O usi uno o usi l'altro.
Position:fixed certo non ti aiuta.
Hai visto la mia demo che 0 auto funziona? È il metodo usato per centrare orizzontalmente se non funziona c'è qualche regola che lo impedisce. Buona norma è anche usare un contenitore esclusivo per l'immagine.
Con le indicazioni che dai io non capisco il problema. Se mi fai vedere la pagina online forse ti posso aiutare
Un problema potrebbe e dico potrebbe essere mettere le regole con #topbar #logo, prova a togliere #topbar
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Ho provato la demo e me la da sul margine sinistra del browser, ho provato con un altro browser e ho ottenuto lo stesso risultato...

Adesso le posto codice HTML e CSS relative alla pagina:
HTML:
Codice:
<!DOCTYPE html>
<html>
    
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <link rel="stylesheet" href="../css/configG90-2.css" type="text/css" />
        <title>Gelateria 90</title>
        
    </head>
    
    <body>
        
        <div id="topbar">
            <img id="logo" alt="Gelateria 90" src="../images/G90-icon.jpg">
        </div>
        
        <div id="navbar">
            <ul>
                <li><a href="Home.html">Home</a></li>
                <li><a href="Prodotti.html">I Nostri Prodotti</a></li>
                <li><a href="Chi Siamo.html">Chi Siamo</a></li>
                <li><a href="Dove Siamo.html">Dove siamo</a></li>
            </ul>
        </div>
        
    </body>

</html>

E quello CSS:
Codice:
#topbar {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height: 90px;
    background-color:white;
    
}

#logo {
    height: 90px;
    width: 90px;
    padding:0;
    margin: 0 auto;
}

Le assicuro che non riuscire a centrare un'immagine che di solito non ho mai avuto problemi mi da alquanto fastidio, ma ci riuscirò, anzi grazie al suo immenso aiuto.
 

Andrea_Ventura

Nuovo Utente
10 Giu 2018
24
0
1
Ho risolto utilizzando la regola:
Text-align nel contenitore. La ringrazio :)

Inviato dal mio RNE-L01 utilizzando Tapatalk
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.402
338
83
Non è la soluzione migliore! Ma se funziona!
 
Discussioni simili
Autore Titolo Forum Risposte Data
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
F [HTML] problema tag canonical HTML e CSS 7
ANDREA20 [HTML] problema con i div HTML e CSS 10
Tommy03 [HTML] Problema Iphone - Android HTML e CSS 1
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A [HTML] Problema HTML e CSS 2
Daniele_Carrara [HTML] Problema attributo min HTML e CSS 0
S [HTML] problema resonsive HTML e CSS 2
S [HTML] Problema <input type="date"> HTML e CSS 0
M problema con video in html 5 HTML e CSS 7
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
1992lvc [WordPress] Problema sidebar widget html Facebook WordPress 2
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
Angelo Russo [HTML] piccolo problema di impaginazione HTML e CSS 13
M [HTML] Problema visualizzazione immagini su dispositivi HTML e CSS 4
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
Kolop [WordPress] [HTML] Problema header su mobile WordPress 4
S [HTML] Problema non visibilità del sito HTML e CSS 1
J [HTML] problema IFrame con dispositivi IOS HTML e CSS 0
R [PHP] Problema stampa array bidimensionali con formula $html.=<<<myHtml... PHP 2
D [phpBB] [HTML] Problema pagina elenco argomenti (di forum) phpBB 9
A [HTML] Problema Safari e unita vw e vh. HTML e CSS 4
jonnino2004 [HTML] problema con bordo su h1 HTML e CSS 2
trattorino [PHP] [HTML] problema form PHP 1
B [HTML] Problema main box di un template HTML e CSS 2
Michaelweb93 [HTML] Problema sito web - wordpress WordPress 2
T [HTML] Problema pulsante scroll down su ecommerce CMS (Content Management System) 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
S Problema invio form php/html PHP 3
S [HTML] Problema menu a comparsa HTML e CSS 5
nipone [WordPress] [HTML] Problema su Sticky Sidebar WordPress 2
M [HTML] Problema Checkbox HTML e CSS 3
M [WordPress] [HTML] Problema immagine background respondive WordPress 21
S [HTML] Problema Sovrapponimento Tab con Contentuto HTML e CSS 0
fulviozecchin Problema Visualizzazione tabelle HTML nel Browser HTML e CSS 9
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
filomeni Problema con mail() in html PHP 4
S [HTML] Problema immagini verticali che si visualizzano capovolte HTML e CSS 3
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
P problema sito html su smartphone.. HTML e CSS 17
S Problema trasformare una stringa in html object Javascript 0
A problema : codice html HTML e CSS 1
C Problema con html e php :D PHP 1
D Problema collegamento file css con html HTML e CSS 4
O Problema con email in formato HTML PHP 1
G html problema table scrollable con header fisso HTML e CSS 2
I Problema Pulsanti Html e PHP, due submit che aggiornano la pagina .. PHP 0
F problema con la stampa su pagina html PHP 1

Discussioni simili