поместите и размер кнопки под текстом с помощью css

Question

Я пытался решить эту проблему, но не могу найти способ заставить ее работать. Поэтому я пришел сюда за помощью.

Моя идея состоит в том, что я хочу разместить и изменить размер кнопки под текстом 99/99, как показано на изображении

Изображение html с кодом

My html

    <div class="btnAttackUpgrade">
        <button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
    </div>

    <div class="btnRangedUpgrade">
        <button class="btnUpgrade btnRangedSize" onclick="btnTest2();totalClick();"></button>
    </div>

    <div class="btnSlayerUpgrade">
        <button class="btnUpgrade btnSlayerSize" onclick="btnTest3();totalClick();"></button>
    </div>

My CSS

.btnUpgrade {
    position: absolute;
    border: 0 none;
    outline: none;   
}

.btnAttackSize {
    width: 31%;
    height: 9%;
}

.btnRangedSize {
    width: 31%;
    height: 9%;
}

.btnSlayerSize {
    width: 31%;
    height: 9%;
}

div.btnSlayerUpgrade {
    position: relative;
    top: 67%;
    left: 34.5%;
}

div.btnRangedUpgrade {
    position: relative;
    top: 34%;
    left: 1%;
}

div.btnAttackUpgrade{
    position: relative;
    top: 0.5%;
    left: 1%;
}

Я знаю, удаляю ли я position: relative; полностью из скажем, btnSlayerUpgrade , он меняет размер кнопки, как я хочу, но тогда он не останется под текстом. Это не повлияет на изменение ширины и высоты. См. Изображение После того, как я удалил относительное положение

Что мешает кнопке изменять размер, когда она имеет положение в css

Answer 1

Если вы правильно поняли ваш вопрос, я думаю, что самый простой и наиболее быстрый способ сделать это - поместить оба элемента в качестве родственных элементов в контейнер с display: flex и с центрированными дочерними элементами.

HTML

<div class="container">
    <div class="btnAttackUpgrade"></div>
    <button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
<div>

CSS

.container{
    display:flex;
    //flex-direction: column; (default)
    justify-content:center;
    align-items:center;
}
.btnAttackUpgrade{
    //unnecessary
}
.btnUpgrade .btnAttackSize{
    //unnecessary 
}