2つの浮動画像の中心にあるテキストの垂直位置の問題

Question

このコードを実行すると、「Text Here」というテキストがdivの一番下に移動します。 .subTextスタイリングは現時点では何もありませんが、私は垂直方向の整列、パディング、マージントップを試しましたが、それを理解できないようです。

HTMLとCSS：

#footballLeft { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 
#footballRight { 
 
    float: right; 
 
    vertical-align: middle; 
 
} 
 
.subText { 
 
    text-align: center; 
 
}

<div class="sect sectTwo"></div> 
 
<div id="footballSection" class="subSection"> 
 
    <h1 class="titles">FOOTBALL</h1> 
 
    <div class="subSubSection"> 
 
    <img src="img/teamhuddle.jpg" height="30%" width="30%" alt="Team Huddle" id="footballLeft" /> 
 
    <img src="img/womens1.jpg" alt="Womens First Team" height="30%" width="30%" id="footballRight" /> 
 
    <p class="subText">Text Here</p> 
 
    </div> 
 
</div>

Answer 1

このコードは正常に動作しますが、私は私が試している間、私がコメントになっていた私のCSS内の別のセクションを持っていたことが分かったとコメントに閉じ括弧を含めるのを忘れてしまった。

Answer 2

あなたのコードは、私には正常に動作します。ブラウザを再起動してもう一度試してみるか、このコードを追加してみてください。

.subText { 

position:relative; 
left: 220px; 
    } 

センターと同じ働きをします。

Answer 3

あなたの文章はすでに私のために一番上に表示されています。 注：浮動小数点要素は垂直整列の影響を受けません

浮動小数点数を使用する代わりにインラインブロックを使用できますか？ https://jsfiddle.net/xw9fce28/

HTML：

<div class="sect sectTwo"></div> 
    <div id="footballSection" class="subSection"> 
    <h1 class="titles">FOOTBALL</h1> 
    <div class="subSubSection"> 
    <img src="http://image.flaticon.com/teams/1-freepik.jpg" height="30%" width="30%" alt="Team Huddle" class="football" /> 
    <p class="subText">Text Here</p> 
    <img src="http://image.flaticon.com/teams/1-freepik.jpg" alt="Womens First Team" height="30%" width="30%" class="football" /> 
    </div> 
</div> 

CSS：

.football { 
    display:inline-block; 
    vertical-align: top; 
} 
.subText { 
    display:inline-block; 
}