Κεντράρισμα module σε responsive template

[Dimitris Kanatas]

Γεια σας παιδιά!

Θα ήθελα να ρωτήσω αν ο κώδικας για να "κεντράρω" τα Module των θέσεων user1, user2, user3, user4 (#user4.row-fluid) του tempate Olympus είναι σωστός (έτσι δείχνει, δε ξέρω σε πολύ μεγάλες αναλύσεις):

Code: [Select]

#user4.row-fluid{
    display: flex;
    justify-content: center;
    align-items: center;
}
Γενικά βλέπω πως τα πρόσθετα του Facebook και του Google+ που θέλω να βάλω σ` αυτές τις θέσεις παρουσιάζουν κάποιες δυσκολίες στην responsive εμφάνιση. Ιδέες;

[datahell]

Μία χαρά δουλεύει. Ο κώδικάς σου είναι σωστός με την εξαίρεση ότι κολάς το #user4 με το .row-fluid που φαντάζομαι είναι άλλο αντικείμενο.

html δοκιμής
<div id="userx">
   <div class="row-fluid">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
</div>

css δοκιμής
#userx .row-fluid { display: flex; justify-content: center; align-items: center; }
#userx .row-fluid div { background:yellow; padding:10px; margin:10px; }

Χρησιμοποιώντας το display flex δεν πετυχαίνεις κεντράρισμα των module αλλά ίσα ύψη (flexbox model / css3). Αν θες απλά κεντράρισμα μπορείς να το κάνεις με ένα απλό text-align:center και display:inline-block για τα module.

[Dimitris Kanatas]

Γιάννη ναι εννοούσα το .row-fluid (το πήρα από το CSS Viewer ως #user4 .row-fluid)

Τελικά το display flex όχι μόνο ήταν αχρείαστο αλλά δημιουργούσε πρόβλημα.

Μπορεί να επανέλθω... 

Σ` ευχαριστώ φίλε μου

[Dimitris Kanatas]

Γεια σας,

Θα ήθελα προτάσεις για να αντιμετωπίσω τον διαφορετικό τρόπο προσέγγισης του inputbox σε firefox και chrome, όπως βλέπετε και στη σχετική εικόνα.

Αυτό συμβαίνει σε όλα τα inputbox π.χ. εγγραφής, αναζήτησης...

[Dimitris Kanatas]

Με δυσκολεύει το κεντράρισμα των module στο πλαίσιο που βλέπετε στην εικόνα... (σε μεγάλες αναλύσεις)  ιδέες;;;;

[datahell]

Για τα input box χρησιμοποίησε περισσότερους selectors. Παράδειγμα:
input.something, input[type=text].something, div.test > input.something { ... }

Κεντράρισμα: Ένα DIV element με display = block καλύπτει όλο το πλάτος της περιοχής που του δίνεις (100%). Για να τα "κεντράρεις" θα πρέπει είτε να τα κάνεις display-block είτε να τους δώσεις στάνταρ πλάτος. Και στις δύο περισσότερος margin αριστερά και δεξιά auto. Παράδειγμα:

div.x { display:block; width: 200px; float:none; margin:0 auto; }

div.y { display:inline-block; margin:0 auto; }

[Dimitris Kanatas]

Γιάννη πάντα δίνεις λύσεις....

Το συμπέρασμα που έβγαλα είναι πως αν χρησιμοποιείς template βασισμένο σε framework ψάχνεις και λίγο στα τυφλά για το που είναι οι ρυθμίσεις εμφάνισης. Δεν έβλεπα ότι τα input box "τραβούσαν" τον κώδικα CSS από το αρχείο bootstrap.min.css και ότι κι αν έκανα στα γνωστά μας αρχειάκια του template, δεν έπιαναν τόπο.

Επίσης στη θέση User4 που έβαλα στο template αναγκάστηκα να ορίσω συγκεκριμένο μέγεθος (1100px) με margin: 10px auto;  (ύστερα από πολλές αποτυχημένες προσπάθειες) και φαίνεται πως πέτυχα την εμφάνιση που ζητούσα.

Σ` ευχαριστώ Γιάννη!