Am'm folosind cadru bootstrap și încercarea de a obține o imagine centrată orizontal, fără succes..
Am'am incercat diverse tehnici, cum ar fi împărțirea la 12 sistem de grilă în 3 blocuri egale e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
Ce's cel mai simplu mod de a obține o imagine centrată în raport cu pagina?
Twitter Bootstrap v3.0.3 are o clasa: centru-bloc
Centrul de blocuri de conținut
Setați un element pentru a afișa: bloc și centru prin marja. Disponibil ca un mixin și de clasă.
Trebuie doar să adăugați o clasă "centru-bloc" in tag-ul img, se pare ca acest lucru
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
În Bootstrap are deja de stil css apel .centru-bloc
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Puteți vedea o mostră de [aici][1]
Twitter bootstrap are o clasa care centre: .paginare-centrat
Ea a lucrat pentru mine să fac:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
Css pentru clasa e:
.pagination-centered {
text-align: center;
}
Ai putea folosi următoarele. Acesta susține Bootstrap 3.x de mai sus.
<img src="..." alt="..." class="img-responsive center-block" />
Presupunând că nu există nimic altceva alături de imagine, cel mai bun mod este de a utiliza text-align: center
în img
părinte:
.row .span4 {
text-align: center;
}
Editare
Așa cum am menționat în alte răspunsuri, puteți adăuga bootstrap CSS class `.text-center la elementul părinte. Acest lucru face exact același lucru și este disponibil în ambele v2.3.3 și v3
Lucrează pentru mine. încercați să utilizați centru-bloc`
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
Am nevoie de acelasi lucru si aici am gasit solutia:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
și să CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Se pare că ne-ar putea folosi un nou HTML5 caracteristică dacă versiunea de browser nu este o problemă:
în fișiere HTML :
<div class="centerBloc">
I will be in the center
</div>
Și în fișierul CSS, vom scrie:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Și așa div putea fi perfect center din browser.
Ar trebui să utilizați
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
@media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
@media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}