Convivenza dimensione px e %

[proppo]

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:

<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

[Experiment8]

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:

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

Il problema è che essendovariabile 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.

[Al_katraz984]

evità se possibile i posizionamenti assoluti..

prova con valign: middle; sul contenitore dell'immagine

[Prill]

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

[proppo]

Che noia! non si centra

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