在 div 中水平居中按钮
[英]Center buttons horizontally in a div
问题描述
我有一个文本框和左上角的一些按钮。 我希望这些按钮直接位于文本框的顶部，而不是位于文本框的左上角。 有没有办法做到这一点。 我试过 justify-content: center 但它没有用。 我正在尝试制作一个类似谷歌文档的应用程序，所以我需要像谷歌文档一样将按钮放在文本框上方。
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); });
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; }
<.DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Editor</title> <link rel="stylesheet" href="index.css" /> </head> <body> <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>Select color</label> <button id="highlight"><mark>Highlight</mark></button> <fieldset class="userInput" contenteditable="true"></fieldset> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2022-08-07 00:08:06
将您的按钮包装成一个 div 并使用 flex-box，看起来会创建所需的样式。
但为什么？ 元素，在显示为flex的容器内，启用了一些关于如何分发子元素的特殊行为，因此 flex-box 有很多用法以及如何在这里为您提供帮助：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
在您的情况下，简单的 css 样式
.toolbar{ /* class name of wrapper div */
display: flex; /* enable flex-box */
justify-content:center; /* here instruct, place all,*/
/* side-by-side but centralized */
}
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); });
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; }
<.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)."> </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>Select color</label> <button id="highlight"><mark>Highlight</mark></button> </div> <fieldset class="userInput" contenteditable="true"></fieldset> </body> </html>
解决方案2
0 2022-08-07 00:05:00
你很亲密。 如果按钮位于文本框上方的 div 内，请确保添加display: flex; 除了justify-content: center; 你提到的。
将引导程序按钮水平居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.