如何让按钮水平居中于文本框上方？解决类Google Docs编辑器布局问题

问题核心是你没有将按钮元素放入flex容器中，justify-content: center 仅对flex容器内部元素生效。要实现类似Google Docs的工具栏布局，按以下步骤调整即可：

步骤1：给工具栏元素添加容器 #

在HTML中，把所有按钮、颜色选择器和标签包裹进一个<div>容器（类名设为toolbar），统一管理布局：

<div class="toolbar">
  <button class="bold" onclick="document.execCommand('bold',false,null);">
    𝗕
  </button>

  <button class="italic" onclick="document.execCommand('italic',false,null);">
    𝘐
  </button>

  <button class="underline" onclick="document.execCommand('underline',false,null);">
    U̲
  </button>

  <input
    type="color"
    class="color-picker"
    id="colorPicker"
    oninput="changeColorText(this.value);"
  />
  <label>选择颜色</label>

  <button id="highlight"><mark>高亮</mark></button>
</div>

步骤2：设置容器的CSS样式 #

给.toolbar添加flex布局，让它和文本框宽度一致，同时居中内部元素：

.toolbar {
  width: 1000px; /* 和文本框宽度保持一致 */
  margin: 10px auto; /* 上下留间距，左右自动居中对齐文本框 */
  display: flex;
  justify-content: center; /* 水平居中内部按钮 */
  gap: 8px; /* 按钮间预留间距，优化视觉效果 */
  align-items: center; /* 垂直居中元素，适配颜色选择器和标签的高度 */
}

细节优化（可选） #

为了让颜色选择器和标签更协调，可微调样式：

.color-picker {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
}

.toolbar label {
  margin-left: 4px;
  margin-right: 8px;
}

完整代码示例 #

HTML #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>编辑器</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="toolbar">
      <button class="bold" onclick="document.execCommand('bold',false,null);">
        𝗕
      </button>

      <button class="italic" onclick="document.execCommand('italic',false,null);">
        𝘐
      </button>

      <button class="underline" onclick="document.execCommand('underline',false,null);">
        U̲
      </button>

      <input
        type="color"
        class="color-picker"
        id="colorPicker"
        oninput="changeColorText(this.value);"
      />
      <label>选择颜色</label>

      <button id="highlight"><mark>高亮</mark></button>
    </div>

    <fieldset class="userInput" contenteditable="true"></fieldset>

  </body>
</html>

CSS #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: lightgrey;
}

.toolbar {
  width: 1000px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.userInput {
  margin: 1px;
  padding: 1px;
  width: 1000px;
  height: 700px;
  resize: none;
  font-family: "Segoe UI", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.inUse {
  background-color: lightblue;
  border-width: thin;
}

button {
  width: 100px;
}

.color-picker {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
}

.toolbar label {
  margin-left: 4px;
  margin-right: 8px;
}

.highlight {
  background-color: yellow;
}

JavaScript #

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");

boldBtn.addEventListener("click", function () {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function () {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function () {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function () {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document
  .getElementById("highlight")
  .addEventListener("click", function () {
    var range = window.getSelection().getRangeAt(0),
      span = document.createElement("span");

    span.className = "highlight";
    span.appendChild(range.extractContents());
    range.insertNode(span);
  });

调整后，工具栏按钮会精准居中在文本框正上方，完全匹配Google Docs的布局逻辑。

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