The CSS vertical-align property sets the vertical alignment of an element.This property is supported by all major browsers.<\/p>\n
\r\n.container img\r\n{\r\n vertical-align:text-top;\r\n}\r\n<\/pre>\nAnother CSS Vertical Align Example<\/h2>\n\r\n.container img\r\n{\r\n vertical-align: middle;\r\n}\r\n<\/pre>\nOne more Example with full html and css<\/h2>\n\r\n\r\n\r\n\r\n CSS Vertical Align Example<\/title>\r\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n<style type=\"text\/css\">\r\n\t.Vertical-outer {\r\n\t\tdisplay: table;\r\n\t\tposition: relative;\r\n\t\toverflow: hidden;\r\n\t\theight:500px;\r\n\t\tbackground: #FFCC00;\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.Vertical-middle {\r\n\t\tdisplay: table-cell;\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tvertical-align: middle;\r\n\t}\r\n\r\n\t.Vertical-inner {\r\n\t\tposition: relative;\r\n\t\ttop: -50%;\r\n\t}\r\n<\/style>\r\n<\/head>\r\n \r\n<body>\r\n \r\n\t<div class=\"Vertical-outer\">\r\n\t<div class=\"Vertical-middle\">\r\n\t<div class=\"Vertical-inner\">\r\n\r\nLorem ipsum dolor sit amet, consectetur adipisicing elit, \r\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \r\n\r\n\t<\/div>\r\n\t<\/div>\r\n\t<\/div>\r\n \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The CSS vertical-align property sets the vertical alignment of an element.This property is supported by all major browsers. .container img { vertical-align:text-top; } Another CSS Vertical Align Example .container img { vertical-align: middle; } One more Example with full html and css CSS Vertical Align Example Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Align - CSS Vertical Align - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Align - CSS Vertical Align - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"The CSS vertical-align property sets the vertical alignment of an element.This property is supported by all major browsers. .container img { vertical-align:text-top; } Another CSS Vertical Align Example .container img { vertical-align: middle; } One more Example with full html and css CSS Vertical Align Example Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-02T08:18:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-05-19T12:17:47+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"CSS Align – CSS Vertical Align\",\"datePublished\":\"2012-03-02T08:18:42+00:00\",\"dateModified\":\"2012-05-19T12:17:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\"},\"wordCount\":38,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\",\"name\":\"CSS Align - CSS Vertical Align - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2012-03-02T08:18:42+00:00\",\"dateModified\":\"2012-05-19T12:17:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Align – CSS Vertical Align\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Align - CSS Vertical Align - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/","og_locale":"en_US","og_type":"article","og_title":"CSS Align - CSS Vertical Align - Vishmax.com","og_description":"The CSS vertical-align property sets the vertical alignment of an element.This property is supported by all major browsers. .container img { vertical-align:text-top; } Another CSS Vertical Align Example .container img { vertical-align: middle; } One more Example with full html and css CSS Vertical Align Example Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed […]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/","og_site_name":"Vishmax.com","article_published_time":"2012-03-02T08:18:42+00:00","article_modified_time":"2012-05-19T12:17:47+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"CSS Align – CSS Vertical Align","datePublished":"2012-03-02T08:18:42+00:00","dateModified":"2012-05-19T12:17:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/"},"wordCount":38,"commentCount":0,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS"],"articleSection":["Labs"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/","url":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/","name":"CSS Align - CSS Vertical Align - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2012-03-02T08:18:42+00:00","dateModified":"2012-05-19T12:17:47+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/css-align-css-vertical-align\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS Align – CSS Vertical Align"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/889"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=889"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/889\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}