JohnMichael JohnMichael - 6 months ago 12
HTML Question

Running into beginner's trouble styling in CSS

I'm trying to align buttons in the center top of the screen but for some reason in my code I can't get them perfectly aligned enter image description here

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


Also, if you zoom in and out, the text inside the buttons exceed the buttons' width. How do I fix that?

I provided you with a FIDDLE.

Answer
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>