Search code examples
htmlalignmentvertical-alignmentmarquee

Marquee vertical alignment

I have an issue in regards the alignment of the marquee. You can see it here : www.vrobal.com Its not middle and sticking too close to the edge of the div. Marquee Problem

I tried to use vertical-align:middle for the div, i tried to use margin-top:-10px and some other methods but they are not working fine. Any suggestion?

<div style=" padding:0px;">
<marquee direction="left" style="padding:0px; background:#2c74a6; height:40px; marging:0px;"><h2><span style="color:#000000">INNOVATION | IMPROVISATION | IMPLEMENTATION&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VICTORY TO GLOBAL RECYLING</span></h2></marquee></div>

P.S: The "&nbsp" is there to space out the 2 sentences as I need to show 2 different sentence coming out when the other is gone on the same marquee.

Solution

  • Here can do it like this

    HTML:

    <div style=" padding:0px;">
<marquee direction="left" style="padding:0px; background:#2c74a6; height:40px; marging:0px;">
<span class="text">INNOVATION | IMPROVISATION | IMPLEMENTATION | VICTORY TO GLOBAL RECYLING</span></marquee></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    CSS:

    .text {
   display: inline-block;
   margin-top: 8px;
   color: #000000;
}​

    I recommend to you remove <h2> and set your <span> to display: inline-block and then with margin you can center it.