Κεντράρισμα με CSS!

[paoad]

Γεια χαρά και πάλι. Έχω ξανακολλήσει εδώ και 2 ώρες και χρειάζομαι κάποιον γενναιόδωρο να με ξεκολλήσει. 

 

1. Θέλω να κάνω όλο το σύστημα (.dad) centered στο κέντρο της σελίδας.

 

2. Να βάλω τους τίτλους των φωτογραφιών στο κάτω μέρος της εικόνας (bottom:0). 

 

http://codepen.io/anon/pen/MeKeJv

 

Δεν πρέπει να είναι δύσκολο, αλλά αυτή τη στιγμή αποκλείεται να το βρω μόνος μου  

 

Ευχαριστώωω

[Vasilis_Tz]

Μπορείς να φτιάξεις τις 2 παρακάτω κλάσεις:

.table{
  display:table;
  height: 100%;
  width: 100%;
}

.table-cell{
  display:table-cell;
  width: 100%;
  vertical-align: middle;
}

Να βγάλεις το margin από το h3 και να χρησιμοποιήσεις τις παραπάνω κλάσεις όπως εγώ παρακάτω:

<div class="parent" id="parent1">
   <div class="table">
     <div class="table-cell">
       <h3>Πύργος του Άιφελ</h3>
     </div>
   </div>
</div>

Ελπίζω να βοήθησα!

 

EDIT:

 

Λάθος μου φίλε.

 

Το παρακάτω codepen κάνει αυτό που θέλεις:

 

http://codepen.io/Vatziat/pen/vKLxQZ

[vadou]

1) Δώσε στο parent element (δεν εννοώ αυτό που του έχεις δώσει class parent) του dad, στην προκειμένη περίπτωση είναι το body, text-align: center;

 

2) Δώσε στα .parent position: relative και στα (.parent h3) position: absolute; και bottom:0;

[paoad]

Μπορείς να φτιάξεις τις 2 παρακάτω κλάσεις:

.table{
  display:table;
  height: 100%;
  width: 100%;
}

.table-cell{
  display:table-cell;
  width: 100%;
  vertical-align: middle;
}

Να βγάλεις το margin από το h3 και να χρησιμοποιήσεις τις παραπάνω κλάσεις όπως εγώ παρακάτω:

<div class="parent" id="parent1">
   <div class="table">
     <div class="table-cell">
       <h3>Πύργος του Άιφελ</h3>
     </div>
   </div>
</div>

Ελπίζω να βοήθησα!

 

EDIT:

 

Λάθος μου φίλε.

 

Το παρακάτω codepen κάνει αυτό που θέλεις:

 

http://codepen.io/Vatziat/pen/vKLxQZ

 

Βασίλη είσαι αρχηγός! Ευχαριστώ!

[Vasilis_Tz]

Να σαι καλά φίλε 

[dominotrix]

Δε χρειαζεσαι JS για δωσεις τα animations που θελεις. Γενικα το ολο στησιμο μπορει να γινει πιο γρηγορα και με καλυτερο performance. Ψαξε για CSS3 Animations. Ειναι 2 γραμμες μονο σε σχεση με αυτο που εχεις τωρα. Αν χρειαστεις κατι μου λες.

[paoad]

Δε χρειαζεσαι JS για δωσεις τα animations που θελεις. Γενικα το ολο στησιμο μπορει να γινει πιο γρηγορα και με καλυτερο performance. Ψαξε για CSS3 Animations. Ειναι 2 γραμμες μονο σε σχεση με αυτο που εχεις τωρα. Αν χρειαστεις κατι μου λες.

Ναι ε? Θα το ψάξω τότε. Να σου πω την αλήθεια, μόλις έμαθα jquery κ ήθελα απαραίτητα να την χρησιμοποιήσω κάπου . Ευχαριστώ πάντως

[dominotrix]

Και πολυ καλα κανεις!

 

Με την CSS3 θα δεις οτι ειναι πολυ ευκολο να κανεις σχεδον οτιδηποτε οσον αφορα transitions / transforms / animation κλπ. Σου συνιστω να μπεις στο Codyhouse, Codrops και φυσικα στο Codepen που ηδη γνωριζεις.

 

CSS <3

[Vasilis_Tz]

Με css3 φυσικά και είναι λιγότερος κώδικας και αρκετά εύκολος τρόπος να κανείς animations αυτό που πρέπει να ξέρεις είναι ότι παλιές εκδόσεις διαφόρων browser δεν υποστηρίζουν css3.