html - 在 CSS 中遇到初学者的麻烦样式

Question

我正在尝试对齐屏幕顶部中央的按钮，但由于我的代码中的某些原因，我无法让它们完美对齐

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;
    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;
}

此外，如果放大和缩小，按钮内的文本会超出按钮的宽度。我该如何解决？

我为您提供了 FIDDLE .

Answer 1

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>