在DIV的宽度扩大时保持文本到位

Question

我有一个DIV，它的宽度在悬停时展开，会显示更多文字。问题是，当div正在向两侧均匀扩展（使用更改边距）时，文本向右移动，就像它保持其在div中的前一个位置一样。这种情况发生在chrome和IE中，但由于某些原因不在Firefox中。如果可能的话，我希望它留在中心。可以在http://wiki.doalogue.co.il/上看到，同时悬停在Doalogue wiki标题上

相关HTML：

<div id="mf-banner-intro">
    <h2>
<span class="mw-headline" id="DoAlogue_Wiki">
            <big><i>headline:DoAlogue Wiki</i></big>
</span>   
    </h2>
    <h3>
            <span class="mw-headline">Second headline</span>
    </h3>
    <p>The apearing text</p>
    <h4>
            <span class="mw-headline">▼</span>
    </h4>
</div>

相关的CSS

#mf-banner-intro {
background: rgba(20,20,20,0.85);
margin: 40px 30% 25px 30%;
padding: 20px;
position: relative;
width: 40%;
font-size: 150%;
text-align: center;
opacity: 0.9;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#mf-banner-intro h2 {
font-size: 150%;
text-align: center;
line-height: 100%;
color: #FFF;
border-bottom: 1px solid #fff;
margin-bottom: -0.2em;}

#mf-banner-intro p {
color: #FFF;
opacity: 0;
font-size: larger;
padding: 1em 3em;
margin-bottom: -1em;
display: none;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}

#mf-banner-intro:hover {
width: 50%;
margin: 40px 25% 25px 25%;
background-color: rgba(59,164,204,0.88);
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}

#mf-banner-intro:hover p {
opacity: 1;
overflow: visible;
display: block;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

谢谢！