Question

我试图显示三个箭头，它们的大小可以改变。

在这三个箭头下，我试图在它下面添加一个数字。我想让数字位于箭头的中心，无论它们的长度如何。

而且我想要的是，无论箭头的大小如何，数字都将处于相同的高度。

为了做到这一点，我尝试了下一个代码，但它确实似乎没有做到这一点 -

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        #container{
height: 80px;
width: 100%;
display: table;
}
#one{
width: 33%;
font-size: 90px;
}

#two{
width: 33%;
font-size: 50px;
}

#three{
width: 33%;
font-size: 60px;
}
#one,#two,#three{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}


        #numbers {


        }


        .num {
        float: left;
        width: 33%;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        font-size: 50px;
        }
    </style>


</head>
<body>

    <div id="container">
        <div id="one">&#9660;</div>
        <div id="two">&#9650;</div>
        <div id="three">&#9660;</div>
    </div>  

    <div id="numbers">
        <div class="num">8888</div>
        <div class ="num">88</divclass>
        <div class="num">8</div>
    </div>

</body>
</html>

任何想法我该怎么办？

感谢您提供任何帮助

Answer 1

我想你的意思是你希望每个文字都放在相应的箭头状符号的正下方，并相对于它水平居中。然后，您需要将#conrainer和#numbers元素显示为同一个表的行，而不是两个独立的表。你需要一个容器，构成表（在CSS意义上）。您不得在此类上下文中使用float。这是一个相当简化的代码修改版本，以实现这个想法：

<style>
#stuff {
  display: table;
  width: 100%;
}
#container{
height: 80px;
width: 100%;
display: table-row;
}
#one{
width: 33%;
font-size: 90px;
}

#two{
width: 33%;
font-size: 50px;
}

#three{
width: 33%;
font-size: 60px;
}
#one,#two,#three{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}


#numbers {
  display: table-row;
}


        .num {
        width: 33%;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        font-size: 50px;
        }
    </style>

<div id="stuff">
    <div id="container">
        <div id="one">&#9660;</div>
        <div id="two">&#9650;</div>
        <div id="three">&#9660;</div>
    </div>  

    <div id="numbers">
        <div class="num">8888</div>
        <div class="num">88</div>
        <div class="num">8</div>
    </div>
</div>

CSS - 无论文本有多长，如何使文本显示在元素的中心下

1 个答案: