gpt4 book ai didi

html - 文本对齐中心不适用于内联 block

转载 作者:行者123 更新时间:2023-11-28 14:48:40 25 4
gpt4 key购买 nike

<分区>

我有一个父 div,其中有三个子 div,所有子 div 都是 display:inline-block,所以三个子 div 都在一行中。

现在的问题是,我希望第一个和最后一个 div 分别 float :右和 float :左,并且中心 div 应该居中对齐。我正在努力做到这一点,但无法实现。

第一个 div 已经在左下角,所以没有问题。最后一个 div 是 float:right,它也可以正常工作。

中心 div 未按预期工作 text-align:center

有人可以帮我解决这个问题吗?

#wave {
color: white;
font-size: 24px;
/* text-align:left; */
line-height: 65px;
display: inline-block;
/* float:left; */
padding-left: 10px;
font-family: Exo-Regular;
font-weight: bolder;
letter-spacing: 1.5px;
padding-right: 22px;
text-align: center;
/* border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
-webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#score-card {
color: white;
font-size: 26px;
/* text-align:right; */
line-height: 65px;
display: inline-block;
float: right;
padding-right: 10px;
font-family: Exo-Regular;
font-weight: bolder;
letter-spacing: 1.5px;
padding-left: 22px;
/* border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
-webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#life {
display: inline-block;
line-height: 65px;
color: white;
font-size: 26px;
}
<div id="stat-board" style="height:65px;background-color:black;">

<div id="wave">
Wave <span id="custom-wave-number"></span>
</div>

<div id="life">
Life <span id="custom-life-number"></span>
</div>

<div id="score-card">
<span id="score">0</span>
</div>


</div>

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