gpt4 book ai didi

html - 如何垂直对齐框大小 div 中的中间文本?

转载 作者:行者123 更新时间:2023-11-28 08:23:22 25 4
gpt4 key购买 nike

我想要做的是根据广告框中图像的高度垂直对齐得分框中的中间文本 (h3)。我已经尝试了几种方法来让它工作,但直到现在都没有成功。我也很好奇如何将带有框大小的 div(在我的例子中是 .ads-box 和 .score-box)设置为相同的高度。提前致谢!

.current-scores {
display: table;
width: 100%;
color: #ffffff;
background-color: #01DFA5;
}
.current-scores .ads-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
text-align: center;
padding: 8px 10px;
margin: 0;
float: left;
}
.current-scores .score-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
text-align: center;
padding: 8px 10px;
margin: 0;
float: left;
}
.current-scores .score-box h3 {
font-size: 16px;
line-height: 18px;
font-weight: bold;
margin: 5px 0 0;
padding: 0;
}
<div class="current-scores">
<div class="ads-box">
<img class="img-responsive" src="https://s3.amazonaws.com/images.seroundtable.com/google-mobile-app-ad-1347454342.png" />
</div>
<div class="score-box">
<h3>IND Vs AUS</h3>
<h3>IND - 153/0</h3>
</div>
<div style="clear:both;"></div>
</div>

Jsfiddle:http://jsfiddle.net/racy2408/6hu1gLtq/

最佳答案

更新了你的 css .current-scores.current-scores .score-box

/*Current Scores and Schedules*/
.current-scores {
display: table;
/*position: fixed;
left: 0;
right: 0;
bottom: 0; */
overflow: hidden;
width: 100%;
color: #ffffff;
background-color: #01DFA5;
padding: 0;
margin: 0;
position:relative;
}
.current-scores .ads-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
text-align: center;
padding: 8px 10px;
margin: 0;
float: left;
}
.current-scores .score-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
text-align: center;
padding: 8px 10px;
margin: 0;
float: right;
position:absolute;
top:50%;
margin-top:-2em;
right:0px;
z-index:1000;
}
.current-scores .ads-box img {
width: 100%;
height: auto;
}
.current-scores .score-box h3 {
font-size: 16px;
line-height: 18px;
font-weight: bold;
margin: 5px 0 0;
padding: 0;
text-transform: uppercase;
text-shadow: -1px 2px 3px rgba(30, 30, 30, 0.8);
}

关于html - 如何垂直对齐框大小 div 中的中间文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28646370/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com