Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 15 su 15
  1. #11
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    18
    Certo che uso un CSS esterno!

    Ho dei dubbi sulla tua risposta, io volevo centrare anche verticalmente. tu non lo fai. Però mi hai fatto venire un'idea:

    codice HTML:
    <img style='display:block; position:absolute; top:50%; left:50%' src='#'>
    Credo che dovrebbe funzionare, no?


    Inoltre la mia domanda era sostanzialmente un'altra (magari è sbagliata):
    Gli em non sono fissi, un valore in em varia in base alla dimensione del carattere usato. Come faccio quindi ad inserire un'immagine fissa all'interno di un blocco variabile?

    Nel senso, se assegno un valore in em all'immagine e questo valore supera la sua dimensione in px, l'immagine si sfuoca... Spero di essermi spiegato

  2. #12
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    Ok, chiedevo visto che stiamo giocando con stili inline

    comunque non lo centrerebbe perché al 50% del contenitore si posizionerebbe l'immagine, sarebbe spostata, puoi aggiungere un margine negativo per compensare:

    codice:
    <img style='display:block; position:absolute; top:50%; left:50%; margin: -npx 0 0 -npx' src='#'>
    
    


    Il problema è che essendo
    variabile la dimensione è un pò un problema definire i margini da applicare (dovrebbero essere la metà delle dimensioni dell'immagine), per il resize dell'immagine basta non dargli valore di larghezza o altezza a mio avviso, e aggiungere soltanto un max-width: 100%; in modo che si adatti al contenitore e non si deformi.

  3. #13
    evità se possibile i posizionamenti assoluti..

    prova con valign: middle; sul contenitore dell'immagine
    Questa volta, più che un voto.. è favoreggiamento.

  4. #14
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Quote Originariamente inviata da proppo Visualizza il messaggio
    Gli em non sono fissi, un valore in em varia in base alla dimensione del carattere usato. Come faccio quindi ad inserire un'immagine fissa all'interno di un blocco variabile?

    Nel senso, se assegno un valore in em all'immagine e questo valore supera la sua dimensione in px, l'immagine si sfuoca... Spero di essermi spiegato
    se l'immagine non deve ridimensionarsi usa le dimensioni fisse, non è detto che se usiamo unità di misura relative per la struttura non possiamo poi far ricorso anche a valori assoluti per contenuti che devono restare invariati sempre e comunque

    per centrare verticalmente puoi anche sfruttare il display table e table-cell e il vertical-align:middle

  5. #15
    Utente di HTML.it
    Registrato dal
    Mar 2014
    Messaggi
    18
    Che noia! non si centra

    codice HTML:
    article {    width:94%;    height:5em;    margin:0px auto 0.5em;    background-color:white;    box-shadow:0em 0em 0.2em 0em #D8D8D8;}
    
    .article_image {    float:left;    width:4em;    height:5em;    background-color:#F7F7F7;    vertical-align:middle;}.article_image img {    width:32px;    height:40px;  display:table-cell;  vertical-align:middle;  margin:0 auto;}
    
    .article_description {    height:5em;    padding-top:1.5em;    margin:0em 2em 0em 4em;}.article_description p {    margin-left:0.7em;    margin-right:0.7em;    font-family:Arial, Helvetica, sans-serif;    font-size:0.9em;}
    
    .article_description i {    font-family:Arial, Helvetica, sans-serif;    font-size:0.7em;    margin-top:0.2em;}
    
    .article_menu {    float:right;    width:2em;    height:3em;    padding-top:2em;}
    
    .article_menu:before {    font-family:'icomoon';    speak:none;    font-style:normal;    font-weight:normal;    font-variant:normal;    text-transform:none;    line-height:1;    -webkit-font-smoothing:antialiased;    -moz-osx-font-smoothing:grayscale;    content:"\e609";    font-size:1em;    color:#B5B5B5;}
    
    <article>
        <div class="article_image"><img src="#"/></div>
        <div class="article_menu"></div>
        <div class="article_description">
            <p><b>title1</b></p>
            <p><i>date</i></p>
        </div>
        <div class="clear"></div>
    </article>
     
    Mi date l'ultimo aiuto?

    Siete stati gentilissimi

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.