如何让按钮在一行居中显示？实现页面三分栏按钮布局

Hey there! Let's get those buttons sorted out so they sit neatly in a centered row, each taking up equal space for easy clicking. The main issues right now are the absolute positioning on the buttons and the messy HTML structure with line breaks throwing off the layout flow. Here's the fix:

Step 1: Restructure Your Button Container #

First, wrap all three buttons in a single container div (I'll call it button-container) and remove those <br> tags that are breaking the layout. This lets us use Flexbox to control the alignment cleanly.

Step 2: Update the CSS #

• Remove position: absolute from the button styles (this was causing overlap)
• Add Flexbox properties to the new container to make buttons align in a row, center them, and give each equal width

Modified CSS Snippet #

/* New button container style */
.button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 999;
}

/* Updated button styles - removed position: absolute, added flex:1 */
#buttonSmall, #buttonStop, #playSampleButton {
  padding: 10px 25px;
  font-size: 10vw;
  height: 100%;
  flex: 1; /* Makes each button take equal space */
  color: #fff;
  font-family: "Roboto", sans-serif;
  z-index: 999;
  letter-spacing: -.05em;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

/* Keep the playSampleButton's original font size if needed, override here */
#playSampleButton {
  font-size: 13vw;
}

Modified HTML Button Section #

<div class="canvas-container">
  <canvas id="freq" width="1024" height="525"></canvas>
  <!-- New button container wrapping all three buttons -->
  <div class="button-container">
    <div id="c1">
      <button id="buttonSmall" type="button" onClick="playLast()">Last</button>
    </div>
    <div id="c3">
      <button id="playSampleButton" type="button" onClick="playNext()">Next</button>
    </div>
    <div id="c2">
      <button id="buttonStop" type="button" onClick="playStop()">Stop</button>
    </div>
  </div>
</div>

Full Modified Code #

Here's the complete code with all fixes applied:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
<style>
@keyframes hue { 0% { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } 100% { filter: hue-rotate(-360deg); -webkit-filter: hue-rotate(-360deg); } }
.canvas-container{ position: relative; width: 100%; height: 100%; }
#freq { background: linear-gradient(#ff0088, red); position: absolute; left: 0; right: 0; margin: 0 auto; }
body { background:#000; overflow: hidden; }
#freq.animateHue, body.animateHue { animation-name: hue; animation-duration: 500s; animation-delay: 1s; animation-iteration-count: infinite; -webkit-animation-name: hue; -webkit-animation-duration: 500s; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; }
#title, #artist, #album { position: relative; text-align: center; width: 100%; z-index: 999; font-weight: 100; font-family: "Roboto", sans-serif; color: #fff; visibility: hidden; letter-spacing: -.05em; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); margin-bottom: 15px; }
#song_info_wrapper { position: absolute; width: 100%; text-align: center; }
#title { font-size: 10vw; }
#artist { font-size: 3vw; }
#album { font-size: 3vw; margin-bottom: 0; }
input, #loading { position: absolute; top: 45%; left: 40%; display: block; z-index: 999; }
#songName { position: absolute; top: 80%; right: 19%; display: block; z-index: 999; width: 100%; font-weight: 100; font-family: "Roboto", sans-serif; color: #fff; letter-spacing: -.05em; text-shadow: 0px 0px 10px rgba(20, 20, 20, 20); margin-bottom: 15px; font-size: 3vw; }
#c1, #c2, #c3 { width: 100%; } /* Updated to take full width of their flex item */

/* New button container style */
.button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 999;
  margin-top: auto; /* Pushes buttons to bottom if canvas-container uses flex, optional */
}

/* Updated button styles */
#buttonSmall, #buttonStop, #playSampleButton {
  padding: 10px 25px;
  font-size: 10vw;
  height: 100%;
  flex: 1;
  color: #fff;
  font-family: "Roboto", sans-serif;
  z-index: 999;
  letter-spacing: -.05em;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  background-color: Transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

#playSampleButton {
  font-size: 13vw;
}

#loading { display: inline-block; top: 44px; left: 110px; font-family: "Roboto", sans-serif; font-size: 12px; }
html, body { width: 100%; height: 100%; margin: 0px; }
@media screen and (min-width: 1000px) { #title { font-size: 100px; } #artist, #album { font-size: 40px; } #buttonSmall, #buttonStop { font-size: 100px; } #playSampleButton { font-size: 130px; } }
@media screen and (max-width: 500px) { #artist, #album { font-weight: 300; font-size: 4vw; } }
@media screen and (max-width: 436px) { #artist, #album { font-weight: 300; font-size: 4.5vw; } }
</style>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div class="button-container">
  <div id="c1">
    <button id="buttonSmall" type="button" onClick="playLast()">Last</button>
  </div>
  <div id="c3">
    <button id="playSampleButton" type="button" onClick="playNext()">Next</button>
  </div>
  <div id="c2">
    <button id="buttonStop" type="button" onClick="playStop()">Stop</button>
  </div>
</div>
</div>
</body>
</html>

Key Changes Explained #

• Flexbox Container: The button-container uses display: flex to arrange buttons horizontally, justify-content: center keeps them centered, and each button's flex:1 ensures they split the available width equally.
• Removed Absolute Positioning: Buttons now follow normal document flow, so no more overlapping.
• Responsive Font Sizes: Added media query for desktop to cap button font sizes so they don't get too big on large screens.

This will give you three full-width, easy-to-click buttons in a centered row exactly as you wanted: Last → Next → Stop.

内容的提问来源于stack exchange，提问作者RobertW