Adaceameritte
New Member
I have an <h2> element in which I'd like to vertically center the enclosed text. It looks right on desktop Chrome, but not on mobile (iOS) Chrome. I would hugely appreciate any insight into this issue. Below find links to screenshots on both (desktop first, mobile second)
esktop (correct behaviour).Mobile (incorrect behaviour).The HTML and CSS code is included below. I have abbreviated the HTML code for readability. Thanks so much, Internet!HTML:...<body id="home"><div id="main"> <div id="header"> ... </div> <div id="content"> <img src="http://stackoverflow.com/questions/15605582/i/splash.jpg" alt="" id="splash" /> <div id="inner"> <h2>hi!</h2> <p>Lorem ipsum...</p> </div> </div> <div id="clear"></div> <div id="footer"> <p>...</p> </div></div></body>...CSS:/* CSS RESET */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div, ul#nav, ul#nav li, ul#nav li a, img#splash { display: block;}body { line-height: 1; background: url('i/bg.jpg') fixed repeat;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}/* WALBAUM WEBFONT */@font-face { font-family: Walbaum; src: url('f/WalbaumMTStd-Regular.otf');}@font-face { font-family: Walbaum; font-weight: bold; src: url('f/WalbaumMTStd-Medium.otf');}@font-face { font-family: Walbaum; font-weight: bold; font-style: italic; src: url('f/WalbaumMTStd-MediumIt.otf');}@font-face { font-family: Walbaum; font-style: italic; src: url('f/WalbaumMTStd-Italic.otf');}/* MAIN */#main { margin: 10px auto 0 auto; max-width: 900px; overflow: hidden;}/* HEADER */#header { width: 100%; margin-bottom: -10px;}#logo { float: none; width: 358px; margin: 0 auto 0 auto;}#logo a, #logo img { width: 100%;}#subtitle { text-align: center; font-size: 14px; color: #3f3f3f; font-family: Georgia, serif; width: 100%; margin-top: -8px;}#subtitle strong { font-weight: bold; color: #982020;}ul#nav { font-family: Walbaum, Georgia, serif; font-size: 24px; height: 100%; text-transform: uppercase; text-align: justify; padding: 0 10px 0 10px;}ul#nav li a { width: 100%; height: 100%; text-decoration: none;}ul#nav li { display: inline-block; height: 100%; padding: 42px 2px 18px 2px; margin: 0 7px 0 7px;}ul#nav:after { content: ''; width: 100%; display: inline-block;}ul#nav li#music a { color: #d86619;}ul#nav li#photos a { color: #1787ac;}ul#nav li#code a { color: #17ac3a;}ul#nav li#about a { color: #a317ac;}ul#nav li a:hover { text-decoration: underline;}/* CONTENT */#content { width: 100%; margin: 0 auto 10px auto;}#content img#splash { width: 100%; padding: 5px; border: 1px solid #191919; background-color: rgba(25,25,25,0.3); margin: 0 auto 0 -6px;}#content #inner { width: 100%;}#content #inner h2 { width: 100%; font-style: italic; color: #999999; text-align: center; font-family: Walbaum, Georgia, serif; font-size: 40px; border-top: 1px dashed #333333; border-bottom: 1px dashed #333333; background-color: rgba(75,75,75,0.1); margin: 0 auto 10px -6px; text-shadow: 0.08em 0.08em 0.05em #090909; padding: 0 6px 0 6px; height: 32px; line-height: 32px;}#content #inner p { font-family: Georgia, serif; text-align: justify; color: #666666; font-size: 14px; margin-bottom: 14px;}/* FOOTER */#clear { clear: both;}#footer { width: 100%; text-align: center; margin: 20px auto 20px auto;}/* RESPONSIVENESS */@media screen and (min-width: 801px) { #logo { margin-right: 10px; float: left; } #main { padding: 0 10px 0 10px; } #content img#splash { max-width: 75%; float: left; margin: 0; } #content #inner { width: 22.5%; float: right; margin: 0; }}@media screen and (max-width: 800px) and (min-width: 521px) { #main { max-width: 95%; } #content #inner { margin-top: 10px; }}@media screen and (max-width: 520px) and (min-width: 359px) { ul#nav { padding: 0 10px 0 10px; } ul#nav li { margin: 0; } #main { max-width: 100%; } #content { width: 95%; } #content #inner { margin-top: 5px; }}@media screen and (max-width: 358px) { #logo { width: 100%; } ul#nav { padding: 20px 5px 0 5px; font-size: 20px; } ul#nav li { margin: 0; padding: 0 2px 0 2px; } #main { max-width: 100%; } #content { width: 95%; } #content #inner { margin-top: 5px; }}@media screen and (max-width: 300px) { ul#nav { padding: 10px 5px 0 5px; } ul#nav li { width: 45%; margin: 0; padding: 0; text-align: center; } #subtitle { font-size: 10px; }}
esktop (correct behaviour).Mobile (incorrect behaviour).The HTML and CSS code is included below. I have abbreviated the HTML code for readability. Thanks so much, Internet!HTML:...<body id="home"><div id="main"> <div id="header"> ... </div> <div id="content"> <img src="http://stackoverflow.com/questions/15605582/i/splash.jpg" alt="" id="splash" /> <div id="inner"> <h2>hi!</h2> <p>Lorem ipsum...</p> </div> </div> <div id="clear"></div> <div id="footer"> <p>...</p> </div></div></body>...CSS:/* CSS RESET */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div, ul#nav, ul#nav li, ul#nav li a, img#splash { display: block;}body { line-height: 1; background: url('i/bg.jpg') fixed repeat;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}/* WALBAUM WEBFONT */@font-face { font-family: Walbaum; src: url('f/WalbaumMTStd-Regular.otf');}@font-face { font-family: Walbaum; font-weight: bold; src: url('f/WalbaumMTStd-Medium.otf');}@font-face { font-family: Walbaum; font-weight: bold; font-style: italic; src: url('f/WalbaumMTStd-MediumIt.otf');}@font-face { font-family: Walbaum; font-style: italic; src: url('f/WalbaumMTStd-Italic.otf');}/* MAIN */#main { margin: 10px auto 0 auto; max-width: 900px; overflow: hidden;}/* HEADER */#header { width: 100%; margin-bottom: -10px;}#logo { float: none; width: 358px; margin: 0 auto 0 auto;}#logo a, #logo img { width: 100%;}#subtitle { text-align: center; font-size: 14px; color: #3f3f3f; font-family: Georgia, serif; width: 100%; margin-top: -8px;}#subtitle strong { font-weight: bold; color: #982020;}ul#nav { font-family: Walbaum, Georgia, serif; font-size: 24px; height: 100%; text-transform: uppercase; text-align: justify; padding: 0 10px 0 10px;}ul#nav li a { width: 100%; height: 100%; text-decoration: none;}ul#nav li { display: inline-block; height: 100%; padding: 42px 2px 18px 2px; margin: 0 7px 0 7px;}ul#nav:after { content: ''; width: 100%; display: inline-block;}ul#nav li#music a { color: #d86619;}ul#nav li#photos a { color: #1787ac;}ul#nav li#code a { color: #17ac3a;}ul#nav li#about a { color: #a317ac;}ul#nav li a:hover { text-decoration: underline;}/* CONTENT */#content { width: 100%; margin: 0 auto 10px auto;}#content img#splash { width: 100%; padding: 5px; border: 1px solid #191919; background-color: rgba(25,25,25,0.3); margin: 0 auto 0 -6px;}#content #inner { width: 100%;}#content #inner h2 { width: 100%; font-style: italic; color: #999999; text-align: center; font-family: Walbaum, Georgia, serif; font-size: 40px; border-top: 1px dashed #333333; border-bottom: 1px dashed #333333; background-color: rgba(75,75,75,0.1); margin: 0 auto 10px -6px; text-shadow: 0.08em 0.08em 0.05em #090909; padding: 0 6px 0 6px; height: 32px; line-height: 32px;}#content #inner p { font-family: Georgia, serif; text-align: justify; color: #666666; font-size: 14px; margin-bottom: 14px;}/* FOOTER */#clear { clear: both;}#footer { width: 100%; text-align: center; margin: 20px auto 20px auto;}/* RESPONSIVENESS */@media screen and (min-width: 801px) { #logo { margin-right: 10px; float: left; } #main { padding: 0 10px 0 10px; } #content img#splash { max-width: 75%; float: left; margin: 0; } #content #inner { width: 22.5%; float: right; margin: 0; }}@media screen and (max-width: 800px) and (min-width: 521px) { #main { max-width: 95%; } #content #inner { margin-top: 10px; }}@media screen and (max-width: 520px) and (min-width: 359px) { ul#nav { padding: 0 10px 0 10px; } ul#nav li { margin: 0; } #main { max-width: 100%; } #content { width: 95%; } #content #inner { margin-top: 5px; }}@media screen and (max-width: 358px) { #logo { width: 100%; } ul#nav { padding: 20px 5px 0 5px; font-size: 20px; } ul#nav li { margin: 0; padding: 0 2px 0 2px; } #main { max-width: 100%; } #content { width: 95%; } #content #inner { margin-top: 5px; }}@media screen and (max-width: 300px) { ul#nav { padding: 10px 5px 0 5px; } ul#nav li { width: 45%; margin: 0; padding: 0; text-align: center; } #subtitle { font-size: 10px; }}