本文介绍了如何使用 CSS Flexbox 布局模型，将一组按钮在其父容器中水平居中。通过简单的 CSS 样式设置，即可轻松实现按钮的集中显示，并提供代码示例，帮助开发者快速应用到实际项目中。
了解 Flexbox 布局
Flexbox（Flexible Box Layout Module）是一种强大的 CSS 布局模型，旨在提供一种更有效的方式来布置、对齐和分配容器中的项目空间，即使它们的大小未知或动态变化。 Flexbox 的主要思想是让容器能够调整其项目的宽度和高度，以最佳方式填充可用空间。 与传统的块状布局相比，Flexbox 在处理复杂布局时提供了更大的灵活性。
实现按钮水平居中的步骤
要将一组按钮水平居中，我们需要将这些按钮包裹在一个容器元素中，然后应用 Flexbox 相关的 CSS 属性。
-
HTML 结构： 首先，确保你的 HTML 结构包含一个包裹所有按钮的 div 容器。
<div class="toolbar"> <button class="bold" onclick="document.execCommand('bold',false,null);"> <b>B</b> </button> <button class="italic" onclick="document.execCommand('italic',false,null);"> <i>I</i> </button> <button class="underline" onclick="document.execCommand('underline',false,null);" > <u>U</u> </button> <input type="color" class="color-picker" id="colorPicker" oninput="changeColorText(this.value);" /> <label>Select color</label> <button id="highlight"><mark>Highlight</mark></button> </div> -
CSS 样式： 接下来，为这个容器添加 CSS 样式，启用 Flexbox 布局，并使用 justify-content: center; 将按钮水平居中。
.toolbar { display: flex; /* 启用 Flexbox 布局 */ justify-content: center; /* 将子元素水平居中 */ }- display: flex; 声明该元素为一个 flex 容器。
- justify-content: center; 定义了项目在主轴上的对齐方式。 在这里，主轴是水平方向，center 值会将项目居中对齐。
完整代码示例
下面是一个完整的 HTML 和 CSS 代码示例，展示了如何实现按钮的水平居中：
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="toolbar">
<button class="bold" onclick="document.execCommand('bold',false,null);">
<b>B</b>
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
<i>I</i>
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
<u>U</u>
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
</div>
<fieldset class="userInput" contenteditable="true"></fieldset>
<script>
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);
});
</script>
</body>
</html>CSS (index.css):
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
background-color: lightgrey;
}
.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;
width: default;
height: default;
border-width: thin;
}
button {
width: 100px;
}
.dropbtn {
/* background-color: #3498db; */
color: black;
/* padding: 16px; */
/* font-size: 16px; */
border: none;
cursor: pointer;
width: 100px;
height: 30px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.highlight {
background-color: yellow;
}
.toolbar {
display: flex;
justify-content: center;
}注意事项
- 确保你的容器元素具有足够的宽度，以便容纳所有按钮。 如果容器宽度不足，按钮可能会溢出。
- justify-content 属性还可以设置其他值，如 flex-start (左对齐), flex-end (右对齐), space-between (项目之间平均分配空间), space-around (项目周围平均分配空间) 等。 根据实际需求选择合适的值。
- Flexbox 布局对浏览器的兼容性较好，但仍建议针对旧版本浏览器进行兼容性处理，例如使用 Autoprefixer 自动添加浏览器前缀。
总结
使用 Flexbox 布局可以轻松实现按钮的水平居中。 通过将按钮包裹在一个容器中，并设置 display: flex; 和 justify-content: center;，即可快速实现所需的布局效果。 Flexbox 是一种强大的布局工具，可以用于解决各种复杂的布局问题。 掌握 Flexbox 的使用，可以显著提高 CSS 布局的效率和灵活性。
