{"id":16271,"date":"2016-06-25T06:29:54","date_gmt":"2016-06-25T06:29:54","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=16271"},"modified":"2016-06-25T06:29:54","modified_gmt":"2016-06-25T06:29:54","slug":"css-web-design-vertical-centering","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/css-web-design-vertical-centering\/","title":{"rendered":"CSS: Web design: Vertical centering"},"content":{"rendered":"

The tutor looks into a simple layout technique.<\/h1>\n

In web design, vertical centering is often desirable. Here’s a quick example:<\/p>\n

Hello! This text is vertically centered. See the code below.<\/div>\n

<\/p>\n

<div style=”height:11em;
\ndisplay:table-cell;vertical-align:middle;
\nbackground-color:LightGreen;color:white;
\nfont-size:150%”><div><\/p>\n

I’ll mention other web design techniques in future posts:)<\/p>\n

Source:<\/p>\n

w3.org<\/a><\/p>\n

w3schools<\/a><\/p>\n

Jack of Oracle Tutoring by Jack and Diane,<\/a> Campbell River, BC.<\/p>\n","protected":false},"excerpt":{"rendered":"

The tutor looks into a simple layout technique. In web design, vertical centering is often desirable. Here’s a quick example: Hello! This text is vertically centered. See the code below. <div style=”height:11em; display:table-cell;vertical-align:middle; background-color:LightGreen;color:white; font-size:150%”><div> I’ll mention other web …<\/p>\n

CSS: Web design: Vertical centering<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1631,837],"tags":[],"class_list":["post-16271","post","type-post","status-publish","format-standard","hentry","category-css","category-web-design"],"_links":{"self":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/comments?post=16271"}],"version-history":[{"count":25,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16271\/revisions"}],"predecessor-version":[{"id":16296,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/posts\/16271\/revisions\/16296"}],"wp:attachment":[{"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/media?parent=16271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/categories?post=16271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oracletutoring.ca\/blog\/wp-json\/wp\/v2\/tags?post=16271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}