文本垂直位置的问题以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

您的代码对我来说很好。 你可以通过重新启动浏览器或尝试添加这段代码再试一次

.subText {

 position:relative;
 left: 220px;
  }

与中心相同的工作。

Answer 2

您的文字已经显示在我的顶部。 注意：浮动元素不受vertical-align的影响

是否可以使用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;
}

Answer 3

这段代码工作正常，但我发现我的CSS中有另一个部分，我在试验时变成了注释，忘了在评论中包含结束括号。