在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

您的文本已經顯示在頂部。 注意：浮動元素不受垂直對齊的影響

正在使用display：inline-block而不是使用浮動塊嗎？ 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; 
}