How to use inline css styling (style="vertical-alignment:middle;") in html5 or tags</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-05-01T02:39:58.273" class="fromnow">May 01 '14 at 02:39</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-05-01T03:13:34.020" datetime="2014-05-01T03:13:34.020">May 01 '14 at 03:13</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,590 times"> <span class="fc-light mr2">Viewed</span> 2,590 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="23401250" data-ownerid="3318283" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="23401250"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Note all <> tags have been removed to allow code to display i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw) </p> <p>Before i go any further, </p> <p><em>First, website URL is AdventistAviation.com.au</em></p> <p><em>Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)</em></p> <p><em>Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)</em></p> <ol> <li><p>First i add the image (this works no problem) </p> <p></p></li> </ol> <p>However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below) </p> <p>I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…</p> <p>I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)</p> <p>style="vertical-align: middle;"</p> <pre><code><iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe> </code></pre> <p>This doesnt seem to do anything different to the method in 1.</p> <pre><code><div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div> </code></pre> <p>I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.</p> <p>I have got to the point where my head is so full of nonworking methods i cant progress further.</p> <p>Can someone help with this one?</p> <p>p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.</p> <p>damn w3c for depreciating the html vertical alignment method in html5!</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/image" class="post-tag js-gps-track" title="show questions tagged 'image'" rel="tag">image</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-05-01T02:57:59.700" class="relativetime">May 01 '14 at 02:57</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">adam</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 01 '14 at 02:39">asked May 01 '14 at 02:39</time> <a href="../../users/3318283/adam" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3318283.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="adam" /> </a> <div class="s-user-card--info"> <a href="../../users/3318283/adam" class="s-user-card--link">adam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">75</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="15 bronze badges">15</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-23401250" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="23401250" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-35854629" class="comment js-comment " data-comment-id="35854629" data-comment-owner-id="3239186" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854629_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">THis will seem like a weird comment but take out spaces between the property and the property value. EX| `<div height="200" iframe="" src="http://image_URL.png" style="vertical-align: middle;" width="200">` There shouldnt be a space between `vertical-align:` and `middle;`</div></span> – <a href="../../users/3239186/brendan" title="1,399 reputation" class="comment-user ">Brendan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854629_23401250"><span title="2014-05-01T02:45:40.657 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:45</span></a></span> </div> </div> </li> <li id="comment-35854638" class="comment js-comment " data-comment-id="35854638" data-comment-owner-id="2687790" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854638_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sorry...had a hard time reading the code. Have you tried styling the iframe and/or img with margin:auto for alignment?</span> – <a href="../../users/2687790/the-one-and-only-chemistryblob" title="7,864 reputation" class="comment-user ">The One and Only ChemistryBlob</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854638_23401250"><span title="2014-05-01T02:46:35.593 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:46</span></a></span> </div> </div> </li> <li id="comment-35854651" class="comment js-comment " data-comment-id="35854651" data-comment-owner-id="1405830" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854651_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If you don't mind, can you please reference where it says `vertical-align` is deprecated? I wasn't aware that was the case, unless you mean the `valign` attribute. Also, I don't see why using inline styling should work any different than from a stylesheet. You can just look for regular CSS solutions instead of narrowing your search to inline specifically. It may also help others help you if you included images in your question, so that we can better understand the issue you're having. It is difficult to imagine since you're using dimensions and distances in your example.</span> – <a href="../../users/1405830/zhihao" title="14,758 reputation" class="comment-user ">Zhihao</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854651_23401250"><span title="2014-05-01T02:47:57.650 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:47</span></a></span> </div> </div> </li> <li id="comment-35854707" class="comment js-comment " data-comment-id="35854707" data-comment-owner-id="2687790" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854707_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Padding in your div (assuming 250 x 250) might also help: e.g., padding:25px;</span> – <a href="../../users/2687790/the-one-and-only-chemistryblob" title="7,864 reputation" class="comment-user ">The One and Only ChemistryBlob</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854707_23401250"><span title="2014-05-01T02:51:47.507 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:51</span></a></span> </div> </div> </li> <li id="comment-35854717" class="comment js-comment " data-comment-id="35854717" data-comment-owner-id="1405830" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854717_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Brendan That does* seem like a weird question to me because 1) There is a space between the property and value 2) It doesn't make a difference. `vertical-align:middle` is equivalent to `vertical-align: middle`.</span> – <a href="../../users/1405830/zhihao" title="14,758 reputation" class="comment-user ">Zhihao</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854717_23401250"><span title="2014-05-01T02:52:25.587 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:52</span></a></span> </div> </div> </li> <li id="comment-35854759" class="comment js-comment " data-comment-id="35854759" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854759_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hi guys, this is bloody driving up the f&$#en wall! not only can i not get it too work...i cant get the damn code inserted into this bloody post so you can read it!!! argh!!!!!</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854759_23401250"><span title="2014-05-01T02:55:27.227 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:55</span></a></span> </div> </div> </li> <li id="comment-35854782" class="comment js-comment " data-comment-id="35854782" data-comment-owner-id="1405830" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854782_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@adam Use ``` (except only one) for inline code, and add 4 spaces to the beginning of lines for code blocks. In the text box where you write the question, there is a button on top that looks like `{ }` and says "Code Sample" when you hover over it. Highlight your code, click that, and it will appear as code.</span> – <a href="../../users/1405830/zhihao" title="14,758 reputation" class="comment-user ">Zhihao</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854782_23401250"><span title="2014-05-01T02:57:41.367 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 02:57</span></a></span> </div> </div> </li> <li id="comment-35854846" class="comment js-comment " data-comment-id="35854846" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854846_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">thanks i have been trying that but was doing it the wrong way.</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854846_23401250"><span title="2014-05-01T03:02:36.370 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:02</span></a></span> </div> </div> </li> <li id="comment-35854869" class="comment js-comment " data-comment-id="35854869" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35854869_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">ok so about the inline code i am trying to make work for header tag line...does the syle="vertical-align:middle;" only work for text between the >"text here"< end and start of tags in iframe?</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35854869_23401250"><span title="2014-05-01T03:04:43.833 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:04</span></a></span> </div> </div> </li> <li id="comment-35855086" class="comment js-comment " data-comment-id="35855086" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35855086_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">WOOOOOOOOOOOOOOOHHHHHHHHHHHHHHHHHHHHHHOOOOOOOOOOOOOOOOOOOO. True genious mexican style!!!! ahahahahaha thank you so much!!!!</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35855086_23401250"><span title="2014-05-01T03:22:46.883 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:22</span></a></span> </div> </div> </li> <li id="comment-35855165" class="comment js-comment " data-comment-id="35855165" data-comment-owner-id="3070133" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35855165_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">i Think this question "<http:>" might help you.</http:></span> – <a href="../../users/3070133/mayank-tripathi" title="1,346 reputation" class="comment-user ">Mayank Tripathi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35855165_23401250"><span title="2014-05-01T03:28:56.527 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:28</span></a></span> </div> </div> </li> <li id="comment-35855193" class="comment js-comment " data-comment-id="35855193" data-comment-owner-id="3504797" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35855193_23401250"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@adam: The image is in the right place now, but you still have two div's with id="header-banner". You can (and should) remove the outer div that doesn't contain the inline styling and your code will still work.</span> – <a href="../../users/3504797/trevor" title="2,300 reputation" class="comment-user ">trevor</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35855193_23401250"><span title="2014-05-01T03:32:56.007 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:32</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="23401448"></a> <div id="answer-23401448" class="answer " data-answerid="23401448" data-ownerid="1031766" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="23401448"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:</p> <pre><code><div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%"> <div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;"> <a href="http://adventistaviation.com.au"> <img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo"> </a> </div> <div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;"> <div style="/ vertical-align: middle; */" height="170" width="500"> <img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200"> </div> </div> </div> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 01 '14 at 03:07">answered May 01 '14 at 03:07</time> <a href="../../users/1031766/ralph-m" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1031766.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ralph.m" /> </a> <div class="s-user-card--info"> <a href="../../users/1031766/ralph-m" class="s-user-card--link">ralph.m</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13,468</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="23 silver badges">23</li> <li class="s-award-bling s-award-blingbronze" title="30 bronze badges">30</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-23401448" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="23401448" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-35855202" class="comment js-comment " data-comment-id="35855202" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35855202_23401448"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">genius, i cant thank you enough ralph. to think i have spent almost a whole day trying to figure this out!!!!</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35855202_23401448"><span title="2014-05-01T03:33:46.097 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:33</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="23401491"></a> <div id="answer-23401491" class="answer accepted-answer" data-answerid="23401491" data-ownerid="3504797" data-score="0" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="23401491"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>@ adam:</p> <p>A simple solution is to change this code:</p> <pre><code><div id="header-banner"> <div style="vertical-align: middle;" height="170" width="500"> <img src="https://googledrive.com/host/...etc..." width="400" height="200"> </div> </div> </code></pre> <p>To just this:</p> <pre><code><div id="header-banner" style="margin-top: 70px;"> <img src="https://googledrive.com/host/...." width="400" height="200"> </div> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 01 '14 at 03:13">answered May 01 '14 at 03:13</time> <a href="../../users/3504797/trevor" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3504797.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="trevor" /> </a> <div class="s-user-card--info"> <a href="../../users/3504797/trevor" class="s-user-card--link">trevor</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,300</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="14 silver badge">14</li> <li class="s-award-bling s-award-bling__bronze" title="13 bronze badge">13</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-23401491" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="23401491" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-35855216" class="comment js-comment " data-comment-id="35855216" data-comment-owner-id="3318283" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment35855216_23401491"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This is the option i went with trevour....it was such a simple solution and this is nothing short of brilliant. much appreciated!</span> – <a href="../../users/3318283/adam" title="75 reputation" class="comment-user owner">adam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/23401250/how-to-use-inline-css-styling-style-vertical-alignment-middle-in-html5-img-or-#comment35855216_23401491"><span title="2014-05-01T03:34:59.333 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '14 at 03:34</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>