Πώς να ευθυγραμμίσετε μια εικόνα στο νεκρό κέντρο με το bootstrap

Χρησιμοποιώ το πλαίσιο bootstrap και προσπαθώ να πάρω μια εικόνα κεντραρισμένη οριζόντια χωρίς επιτυχία..

Δοκίμασα διάφορες τεχνικές, όπως η διάσπαση του συστήματος 12 πλεγμάτων σε 3 ίσα μπλοκ, π.χ.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Ποια'είναι η ευκολότερη μέθοδος για να λάβω μια εικόνα κεντραρισμένη σε σχέση με τη σελίδα;

Το Twitter bootstrap έχει μια κλάση που κεντράρει: .pagination-centered

Δούλεψε για μένα να το κάνω:

<div class="row-fluid">
   <div class="span12 pagination-centered">![header](header.png)</div>
</div>

Το css για την κλάση είναι:

.pagination-centered {
  text-align: center;
}
Σχόλια (2)

Υποθέτοντας ότι δεν υπάρχει τίποτα άλλο δίπλα στην εικόνα, ο καλύτερος τρόπος είναι να χρησιμοποιήσετε το text-align: center στο γονέα img:

.row .span4 {
    text-align: center;
}

Επεξεργασία

Σχόλια (4)

Μπορείτε να αλλάξετε το CSS της προηγούμενης λύσης ως εξής:

.container, .row { text-align: center; }

Αυτό θα πρέπει να κεντράρει επίσης όλα τα στοιχεία στο γονικό div.

Σχόλια (0)