Jeg bruker bootstrap-rammeverket og prøver å få et bilde sentrert horisontalt uten å lykkes ...
Jeg' har prøvd forskjellige teknikker som å dele det 12 rutenettsystemet i 3 like blokker, f.eks.
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
Hva er den enkleste metoden for å få et bilde sentrert i forhold til siden?
Twitter bootstrap har en klasse som sentrerer: .pagination-centered
Det fungerte for meg å gjøre:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
Css for klassen er:
.pagination-centered {
text-align: center;
}
Forutsatt at det ikke er noe annet ved siden av bildet, er den beste måten å bruke text-align: center
i img
-forelderen:
.row .span4 {
text-align: center;
}
Edit
Som nevnt i de andre svarene, kan du legge til bootstrap CSS-klassen .text-center
til det overordnede elementet. Dette gjør akkurat det samme og er tilgjengelig i både v2.3.3 og v3.