Html 遇到初学者'；CSS中的样式设置问题

我试图对齐屏幕中央顶部的按钮，但由于代码中的某些原因，我无法使它们完全对齐

此外，如果放大和缩小，按钮内的文本将超过按钮的宽度。我该如何解决这个问题

---

我为您提供了一个。

似乎您缺少一个

垂直对齐：文本顶部属性。请参见一个示例，说明使用它时的外观。
使用此css
Use this css

<style>
        body {
            margin: 0;
            width: 83%;
        }

        #range{
            width: 90%;
        }

        button { 
            width: 13%;
            height: 50px;
            display: inline-block;
            font-family: Verdana, "Helvetica", sans-serif;
            font-size:small;
            font-weight: bold;
            color: #FFFFFF;
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 1px 1px 0px #07526e;
            padding-top: 6px;
            /* padding-left: 1%; */
            margin-left: auto;
            margin-right: auto;
            left: 15%;
            margin-top: 2%;
            position: relative;
            cursor: pointer;
            border: none;
            background: #000000;
            background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
            border-radius: 5px;
            box-shadow: inset 0px 1px 0px #5C6061, 0px 5px 0px 0px #4A4A4A, 0px 10px 5px #060606;
        }

        button:active {
            top:3px;
            box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
        }

        .range-class {
            top:6px;
        }
    </style>
    <div class="menu"> <button type="button" class="range-class"><input type="range" id="range" min="1" max="30"  value="16"/></button>
        <button type="button" id="reloadbutton" class="reloadbutton" onclick="load()">Reset</button><audio id="disappearsound"> </audio>
        <button type="button" id="disappearbutton" class="disappearbutton" onclick="PlayDisappearSound()">Disappear</button><audio id="blackholesound"> </audio>
        <button type="button" id="blackholebutton" class="blackholebutton" onclick="PlayBlackHoleSound()">Black hole</button>
        <button type="button" id="cometsbutton" class="cometsbutton" onclick="launchComets">Comets</button> <audio id="spacesound"> </audio>
        <button type="button" id="playbutton" class="playbutton" onclick="playOrPause()">Sound off</button>
        <a href="index.php"><button type="button" id="portfolio" class="portfoliobutton">Back</button></a>
    </div>

身体{
保证金：0；
宽度：83%；
}
#射程{
宽度：90%；
}
按钮{
宽度：13%；
高度：50px；
显示：内联块；
字体系列：Verdana，“Helvetica”，无衬线；
字体大小：小；
字体大小：粗体；
颜色：#FFFFFF；
文字装饰：无；
文本转换：大写；
文本对齐：居中；
文本阴影：1px 1px 0px#07526e；
填充顶部：6px；
/*左：1%*/
左边距：自动；
右边距：自动；
左：15%；
利润率最高：2%；
位置：相对位置；
光标：指针；
边界：无；
背景：#000000；
背景图像：线性梯度（底部，rgb（14137182）0%，rgb（22179236）100%）；
边界半径：5px；
盒影：嵌入0px 1px 0px 5C6061、0px 5px 0px 4A4A4A、0px 10px 5px 0606；
}
按钮：激活{
顶部：3px；
盒影：插入0px 1px 0px 2ab7ec，0px 2px 0px 0px 07526e，0px 5px 3px 999；
}
.射程等级{
顶部：6px；
}
重置
由于您已经为按钮使用了
显示：内联块
，您需要使用css的
垂直对齐
属性在父级中垂直对齐它们。请检查以下示例：


正文{
保证金：0；
宽度：83%；
}
#射程{
宽度：90%；
}
按钮{
宽度：13%；
高度：50px；
显示：内联块；
垂直对齐：top；/*我只添加了这一行，因为您使用了disaply:inline块，所以可以通过设置css的垂直对齐属性来对齐元素*/
字体系列：Verdana，“Helvetica”，无衬线；
字体大小：小；
字体大小：粗体；
颜色：#FFFFFF；
文字装饰：无；
文本转换：大写；
文本对齐：居中；
文本阴影：1px 1px 0px#07526e；
填充顶部：6px；
/*左：1%*/
左边距：自动；
右边距：自动；
左：15%；
利润率最高：2%；
位置：相对位置；
光标：指针；
边界：无；
背景：#000000；
背景图像：线性梯度（底部，rgb（14137182）0%，rgb（22179236）100%）；
边界半径：5px；
盒影：嵌入0px 1px 0px 5C6061、0px 5px 0px 4A4A4A、0px 10px 5px 0606；
}
按钮：激活{
顶部：3px；
盒影：插入0px 1px 0px 2ab7ec，0px 2px 0px 0px 07526e，0px 5px 3px 999；
}

重置
非常感谢，尽管文本问题仍然存在。当我大幅放大时，如何保持按钮内的宽度？
Use this css

<style>
        body {
            margin: 0;
            width: 83%;
        }

        #range{
            width: 90%;
        }

        button { 
            width: 13%;
            height: 50px;
            display: inline-block;
            font-family: Verdana, "Helvetica", sans-serif;
            font-size:small;
            font-weight: bold;
            color: #FFFFFF;
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 1px 1px 0px #07526e;
            padding-top: 6px;
            /* padding-left: 1%; */
            margin-left: auto;
            margin-right: auto;
            left: 15%;
            margin-top: 2%;
            position: relative;
            cursor: pointer;
            border: none;
            background: #000000;
            background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
            border-radius: 5px;
            box-shadow: inset 0px 1px 0px #5C6061, 0px 5px 0px 0px #4A4A4A, 0px 10px 5px #060606;
        }

        button:active {
            top:3px;
            box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
        }

        .range-class {
            top:6px;
        }
    </style>
    <div class="menu"> <button type="button" class="range-class"><input type="range" id="range" min="1" max="30"  value="16"/></button>
        <button type="button" id="reloadbutton" class="reloadbutton" onclick="load()">Reset</button><audio id="disappearsound"> </audio>
        <button type="button" id="disappearbutton" class="disappearbutton" onclick="PlayDisappearSound()">Disappear</button><audio id="blackholesound"> </audio>
        <button type="button" id="blackholebutton" class="blackholebutton" onclick="PlayBlackHoleSound()">Black hole</button>
        <button type="button" id="cometsbutton" class="cometsbutton" onclick="launchComets">Comets</button> <audio id="spacesound"> </audio>
        <button type="button" id="playbutton" class="playbutton" onclick="playOrPause()">Sound off</button>
        <a href="index.php"><button type="button" id="portfolio" class="portfoliobutton">Back</button></a>
    </div>