[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
 
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
 
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: 420
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>
 
No guardi che le ho messe.
Però non so perché rimane sempre a sinistra.
908c4aa16445636dd71cb30975fda6bf.jpg


Inviato dal mio RNE-L01 utilizzando Tapatalk
 
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
 
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.
 
Ho risolto utilizzando la regola:
Text-align nel contenitore. La ringrazio :)

Inviato dal mio RNE-L01 utilizzando Tapatalk
 
Non è la soluzione migliore! Ma se funziona!
 

Discussioni simili