cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="grey-bg" id="blog">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <h3 class="title-small-center text-center">
                  <span>Vertical alignment CSS</span>
                </h3>
                <div class="row">
                  <div class="col-md-6 col-md-offset-3">
                    <p class="content-details text-center">
                      With Jquery divide divs by 3
                    </p>
                  </div>
                </div>
				
				

				
                <!--GRID BLOG-->

                <div class="grid" style="position: relative; height: 1920px;">
					<div class="parent vertical-align"><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-1" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2015-06-02 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         ΕΛΑΣ: Πως να προστατευτειτε απο το κακοβουλο λογισμικο «WannaCry» 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Συστήνεται να πληκτρολογούνται οι διευθύνσεις των ιστοσελίδων (URL) στον φυλλομετρητή ιστοσελίδων (browser), αντί να χρησιμοποιούνται υπερσύνδεσμοι (links).
Να χρησιμοποιούνται γνήσια λογισμικά προγράμματα και να ενημερώνονται τακτικά (updates), ενώ θα πρέπει να υπάρχει πάντα ενημερωμένο πρόγραμμα προστασίας από ιούς του Η/Υ.
Να ελέγχουν και να έχουν πάντοτε ενημερωμένη την έκδοση του λειτουργικού τους συστήματος.

                      </p>
                    </div>
                  </div><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-1" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2016-04-15 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         Ρομποτ λογισμικου πιανει… κουβεντουλα με τους ανθρωπους 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Το συναισθηματικό chatbot βασίζεται σε έναν αλγόριθμο «συναισθηματικής ταξινόμησης», που έμαθε να διακρίνει τα ξεχωριστά ανθρώπινα συναισθήματα, αφού αρχικά ανέλυσε 23.000 αναρτήσεις στο κινεζικό δίκτυο Weibo. Στη συνέχεια, βελτίωσε την ικανότητα του με περαιτέρω εκπαίδευση σε εκατομμύρια αναρτήσεις στο ίδιο κοινωνικό δίκτυο, μαθαίνοντας να απαντά ερωτήσεις με συναισθηματικό τρόπο.
                      </p>
                    </div>
                  </div><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-3" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2016-04-21 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         Και εγενετο ο πρωτος κβαντικος υπολογιστης σε διεθνες επιπεδο
 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Οι Κινέζοι επιστήμονες κατασκεύασαν τον πρώτο κβαντικό υπολογιστή σε διεθνές επίπεδο, ο οποίος ξεπερνά τους συμβατικούς υπολογιστές, ανοίγοντας το δρόμο στη νέα εποχή των κβαντικών υπολογιστών, έναντι των δυνατοτήτων των συμβατικών υπολογιστών.

Οι επιστήμονες, σύμφωνα με δημοσίευμα του πρακτορείου Xinhua που αναμεταδίδει το Αθηναϊκό Πρακτορείο Ειδήσεων,  ανακοίνωσαν το επίτευγμά τους στο Ινστιτούτο Τεχνολογικών Επιστημών της Σαγκάης (Shanghai Institute for Advanced Studies of University of Science and Technology of China), καθώς εκτιμούν ότι η δυνατότητα επεξεργασίας δεδομένων των κβαντικών υπολογιστών είναι κατά πολύ μεγαλύτερη από αυτή, των σημερινών υπέρ-υπολογιστών συμβατικής γενιάς.

Η βάση της λειτουργίας των κβαντικών υπολογιστών στηρίζεται στην αποτελεσματική διαχείριση μικροσωματιδίων, ενώ αποτελεί αντικείμενο διεθνούς ανταγωνισμού μεταξύ των ειδικών επιστημόνων που ασχολούνται με το αναφερόμενο τεχνολογικό αντικείμενο.
                      </p>
                    </div>
                  </div></div>															<div class="parent vertical-align"><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-4" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2017-03-02 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         Εφαρμογη στο κινητο καθοδηγει τους διαβητικους τι να φανε 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Η Glucoracle επιτρέπει στον χρήστη-ασθενή να «ανεβάσει» στη συσκευή μετρήσεις σακχάρου από την ανάλυση του αίματος του, καθώς επίσης φωτογραφίες κάθε τροφής και μια χονδρική εκτίμηση για το διατροφικό περιεχόμενό της. Η εφαρμογή στη συνέχεια παρέχει στον χρήστη μια άμεση πρόβλεψη για το πόσο θα ανέβει το σάκχαρό του, αν φάει αυτή την τροφή.
                      </p>
                    </div>
                  </div><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-5" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2017-03-02 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         Σε δοκιμαστικη φαση περασε το νεο λειτουργικο συστημα της Google 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Διαθέσιμο στους προγραμματιστές για δοκιμές έκανε πρόσφατα η Google το επόμενης γενιάς λειτουργικό της σύστημα για συσκευές κινητής τηλεφωνίας, το Android O. Όπως αναφέρει σε δημοσίευμά του το περιοδικό Wired, το νέο OS θα επικεντρώνεται κυρίως στη βελτίωση της διάρκειας ζωής της μπαταρίας των κινητών τηλεφώνων.

Το Android Nougat, η πιο πρόσφατη έκδοση του λειτουργικού, κυκλοφόρησε τον Αύγουστο του 2016 και έκτοτε έχει ενσωματωθεί μόλις στο 3% όλων των συσκευών Android. Παρά τους αργούς ρυθμούς ενσωμάτωσής του στις συσκευές κινητής τηλεφωνίας, η Google έκανε διαθέσιμο στους προγραμματιστές την πρώτη έκδοση του επόμενου λειτουργικού της, το οποίο θα φέρει την επίσημη ονομασία του όταν θα πλησιάζει η ολοκλήρωσή του, όπως αναφέρει το Αθηναϊκό Πρακτορείο Ειδήσεων.

«Βασιζόμενοι στο έργο που ξεκινήσαμε με το Nougat, το Android O θα επικεντρώνεται κυρίως στη βελτίωση της διάρκειας ζωής της μπαταρίας και στη διαδραστική απόδοση της συσκευής», αναφέρεται σε blog του Android .
                      </p>
                    </div>
                  </div><div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-5" class="img-circle text-center" src="http://i177.photobucket.com/albums/w216/leonalkalai/blog_screenshot5.jpg">
                      <p class="subtitle fancy">
                        <span>2017-03-02 00:00:00 </span>
                      </p>
                      <a href="#">
                        <h3 class="title">
                         Για πρωτη φορα εκτυπωθηκαν τρισδιαστατα γυαλινα αντικειμενα 
                        </h3>
                      </a>
                      <p class="content-blog">
                        Τρόπο να χρησιμοποιούν καθαρό γυαλί ως πρώτη ύλη εκτύπωσης βρήκαν οι επιστήμονες του Ινστιτούτου Τεχνολογίας της Καρλσρούης, με επικεφαλής τον μηχανολόγο μηχανικό Μπάστιαν Ραπ, οι οποίοι εκτύπωσαν για πρώτη φορά γυάλινα αντικείμενα. Με αυτό τον τρόπο δημιουργούνται νέες δυνατότητες για ποικίλες εφαρμογές στην οπτική, στην μετάδοση δεδομένων, στη βιοτεχνολογία, στη βιοϊατρική κ.α.

                      </p>
                    </div>
                  </div></div>															

				</div>
			</div>

                <!--/.GRID BLOG END-->
				
				
              </div>
            
          </div>
        </section>
            
          
!
            
              body{
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  height:auto;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
  .row {
    margin-right: -15px;
    margin-left: -15px;
}
.grid-item .wrap-article .img-circle {
    width: 133px;
    height: 133px;
}

.grid-item .wrap-article img {
    text-align: center;
    display: block;
    margin: 0 auto;
}
#blog {
    height: 1920px;
}
.text-center {
    text-align: center;
}
.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.parent{
height:620px;
margin:0;
padding:0;
}	
.modal{
	z-index: 9999!important;
}
/*-------------- e. blog -------------*/
.grid {margin-top: 60px;}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-item {
  width: 33.333%;
  float: left;
  top: 0px;
  left: 0px;
  overflow: hidden;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 30px;
}
.grid-item .wrap-article {
  border: 1px solid rgba(129, 129, 129, 0.1);
  /*background: #ffffff;*/
  background: #e1ecf1;
  padding: 30px 20px;
}
.grid-item .wrap-article img {
  text-align: center;
  display: block;
  margin: 0 auto;
}
.grid-item .wrap-article .img-circle {
  width: 133px;
  height: 133px;
}
.grid-item .wrap-article .fancy {
  line-height: 0.5;
  text-align: center;
  font-size: 16px;
  margin-top: 40px;
  color: #818181;
}
.grid-item .wrap-article .fancy span {
  display: inline-block;
  position: relative;
}
.grid-item .wrap-article .fancy span:before,
.grid-item .wrap-article .fancy span:after {
  content: "";
  margin-top: 1px;
  position: absolute;
  height: 5px;
  border-top: 1px solid #dedede;
  top: 0;
  width: 60%;
}
.grid-item .wrap-article .fancy span:before {
  right: 100%;
  margin-right: 5px;
}
.grid-item .wrap-article .fancy span:after {
  left: 100%;
  margin-left: 5px;
}
.grid-item .wrap-article .title {
  font-size: 16px;
  padding: 0 10px 0 10px;
  text-align: center;
  letter-spacing: 0.1;
  line-height: 26px;
  text-transform: uppercase;
  font-weight: 700;
}
.grid-item .wrap-article .title:after {
  content: "";
  display: block;
  margin: 0 auto;
  bottom: -20px;
  height: 1px;
  background: #dedede;
  width: 48px;
  left: 0;
  margin-top: 30px;
}
.grid-item .wrap-article .content-blog {
  margin-top: 30px;
  padding: 0 10px 0 10px;
  text-align: justify;
  color: #5f5f5f;
}

            
          
!
            
              	jQuery(document).ready(function($){		
	var $children = $('.grid-item');
	for(var i = 0, l = $children.length; i < l; i += 3) {
		$children.slice(i, i+3).wrapAll('<div class="parent vertical-align"></div>');
	}
	});
            
          
!
999px
Loading ..................

Console