{"id":1650,"date":"2012-11-28T15:35:00","date_gmt":"2012-11-28T14:35:00","guid":{"rendered":"https:\/\/sgaul.de\/?p=1650"},"modified":"2014-03-13T21:34:46","modified_gmt":"2014-03-13T20:34:46","slug":"css-elemente-vertikal-zentrieren","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2012\/11\/28\/css-elemente-vertikal-zentrieren\/","title":{"rendered":"CSS: Elemente vertikal zentrieren"},"content":{"rendered":"<h2>Bild im Rahmen zentrieren<\/h2>\n<p>Ein Inline-Element (span, img, b, u, i, em&#8230;) in einem Blockelement (div, p, h1&#8230;) vertikal zu zentrieren ist nicht leicht. Zwar gibt es die CSS-Eigenschaft vertical-align, aber leider ist deren Verhalten recht eigen:<\/p>\n<pre>div { height:50px; }\r\nspan { vertical-align:middle; }<\/pre>\n<div style=\"margin-bottom:1em;background:#ddd;height:50px;width: 100px;\"><span style=\"background:green;vertical-align:middle;color:white;\">span<\/span><\/div>\n<p><!--more--><br \/>\nEin recht ern\u00fcchternder Anfang. Dann vielleicht die selbe H\u00f6he verwenden:<\/p>\n<pre>div { height:50px; }\r\nspan { vertical-align:middle; height: 50px; }<\/pre>\n<div style=\"margin-bottom:1em;background:#ddd;height:50px;width: 100px;\"><span style=\"background:green;vertical-align:middle;height:50px;color:white;\">span<\/span><\/div>\n<p>Klappt auch nicht. Span ist ein Inline-Element und hat als solches gar keine H\u00f6he. Die Angabe hat keinerlei Auswirkung.<\/p>\n<p>Abhilfe schafft stattdessen die leider weniger bekannte Eigenschaft line-height:<\/p>\n<pre>div { height:50px; }\r\nspan { vertical-align:middle; line-height: 50px; }<\/pre>\n<div style=\"margin-bottom:1em;background:#ddd;height:50px;width: 100px;\"><span style=\"background:green;vertical-align:middle;line-height:50px;color:white;\">span<\/span><\/div>\n<h2>Checkbox und Label auf gleicher H\u00f6he<\/h2>\n<p>Ein \u00e4hnliches Problem stellt sich oft, wenn man Checkbox und Label auf der selben H\u00f6he haben m\u00f6chte. Nicht selten l\u00e4sst sich auch mit vertical-align kein gleichm\u00e4\u00dfiges Bild erzeugen:<\/p>\n<div style=\"margin-bottom:1em;background:#ddd;width: 150px;\"><input type=\"checkbox\"><label style=\"vertical-align:middle;\">Klick mich!<\/label><\/div>\n<p>Auch hier ist oft die unterschiedliche Zeilenh\u00f6he schuld. Eine Korrektur f\u00fchrt zur gew\u00fcnschten H\u00f6hengleichheit:<\/p>\n<pre>input { vertical-align:middle;line-height:1em; }\r\nlabel { vertical-align:middle; }<\/pre>\n<div style=\"margin-bottom:1em;background:#ddd;width: 150px;\"><input type=\"checkbox\" style=\"vertical-align:middle;line-height:1em;\"><label style=\"vertical-align:middle;line-height:1em;\">Klick mich!<\/label><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Bild im Rahmen zentrieren Ein Inline-Element (span, img, b, u, i, em&#8230;) in einem Blockelement (div, p, h1&#8230;) vertikal zu zentrieren ist nicht leicht. Zwar gibt es die CSS-Eigenschaft vertical-align, aber leider ist deren Verhalten recht eigen: div { height:50px; } span { vertical-align:middle; } span<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[38,90],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1650"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=1650"}],"version-history":[{"count":47,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1650\/revisions"}],"predecessor-version":[{"id":1744,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/1650\/revisions\/1744"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=1650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=1650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=1650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}