在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

您似乎错过了按钮风格的vertical-align: text-top;属性。请参阅this fiddle，并举例说明它的外观。

Answer 2

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>

Answer 3

由于您已将display: inline-block用于按钮，因此需要使用css的vertical-align属性在父级中垂直对齐它们。请查看以下示例：

body {
	margin: 0;
	width: 83%;
}

#range{
	width: 90%;
}

button { 
    width: 13%;
    height: 50px;
    display: inline-block;
    vertical-align: top; /* I've added this line only, as you have used disaply: inline-block, you can align your elements by settin vertical-align property of css */
    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;
}

 <div class="menu"> <button type="button"><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>