in Anfänger-Lauf Probleme Styling in CSS

Question

I Tasten in der Mitte oben auf dem Bildschirm auszurichten bin versucht, aber aus irgendeinem Grund in meinem Code kann ich sie perfekt

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

auch ausgerichtet nicht erhalten, wenn Sie vergrößern und verkleinern den Text, der Text in den Schaltflächen überschreitet die Breite der Schaltflächen. Wie repariere ich das?

Ich habe Ihnen eine FIDDLE zur Verfügung gestellt.

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> 

Answer 2

Scheint, dass Sie eine vertical-align: text-top; Eigenschaft in Ihrem Button-Stil vermissen. Siehe this fiddle mit einem Beispiel, wie es damit aussehen würde.

Answer 3

Wie Sie display: inline-block für Ihre Tasten verwendet haben, müssen Sie vertical-align Eigenschaft von CSS vertikal ausrichten in der Mutter verwenden. Bitte überprüfen Sie folgendes Beispiel:

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

 
#range{ 
 
\t 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> 
 
\t <button type="button" id="reloadbutton" class="reloadbutton" onclick="load()">Reset</button><audio id="disappearsound"> </audio> 
 
\t <button type="button" id="disappearbutton" class="disappearbutton" onclick="PlayDisappearSound()">Disappear</button><audio id="blackholesound"> </audio> 
 
\t <button type="button" id="blackholebutton" class="blackholebutton" onclick="PlayBlackHoleSound()">Black hole</button> 
 
\t <button type="button" id="cometsbutton" class="cometsbutton" onclick="launchComets">Comets</button> \t <audio id="spacesound"> </audio> 
 
\t <button type="button" id="playbutton" class="playbutton" onclick="playOrPause()">Sound off</button> 
 
\t <a href="index.php"><button type="button" id="portfolio" class="portfoliobutton">Back</button></a> 
 
\t </div>