To prawdopodobnie głupie pytanie, ale ponieważ zwykłe sposoby wyśrodkowania obrazu nie działają, pomyślałem, że zapytam. Jak mogę wyśrodkować (poziomo) obraz wewnątrz div pojemnika?
Oto HTML i CSS. Dołączyłem również CSS dla innych elementów miniatury. Działa w kolejności malejącej, więc najwyższy element jest pojemnikiem na wszystko, a najniższy jest we wszystkim.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
Okej, dodałem znaczniki bez PHP, więc powinno być lepiej widoczne. Żadne z tych rozwiązań nie działa w praktyce. Tekstu na górze i na dole nie można wyśrodkować, a obraz powinien być wyśrodkowany w div div kontenera. Kontener ma ukryty przepełnienie, więc chcę zobaczyć środek obrazu, ponieważ zwykle tam jest fokus.
img
podlegają, text-align: center
chyba display
że zostały zmodyfikowane.
text-align: center
img
on zawarty w a
. Jestem głupi.