[英]How to center a button in Javascript
I am trying to center a button in Javascript so that it is horizontally centered in the page.我试图在 Javascript 中居中一个按钮,以便它在页面中水平居中。 Right now, my button is in a in my html file, so I don't know how I can use CSS to center it since it's in Javascript.
现在,我的按钮在我的 html 文件中,所以我不知道如何使用 CSS 将它居中,因为它是在 Javascript 中。
TLDR: In Javascript, if I hvae declared a button btn, what code should I write to center it horizontally? TLDR:在 Javascript 中,如果我 hvae 声明了一个按钮 btn,我应该编写什么代码来使其水平居中?
I have searched all over the internet for a way to use Javascript to center a button to no avail.我在互联网上搜索了一种使用 Javascript 将按钮居中的方法,但无济于事。 I hope you all can help me.
我希望你们都可以帮助我。
Thank you!谢谢!
you can use the CSS DOM to achieve it in javascript您可以使用CSS DOM在 javascript 中实现它
you can use the style
keyword to style an element您可以使用
style
关键字来设置元素的样式
for example if you have this code to center the button in css例如,如果您有此代码将按钮居中放置在 css 中
<div id="div">
<button>hi</button
</div>
div{
display: flex;
align-items: center;
you can write it in javascript as你可以用javascript写成
const div = document.getELementById("div");
div.style.display = "flex";
div.style.alignItems = "center";
Here are two ways you do to this:这里有两种方法可以做到这一点:
// Create button var myCenteredButton = document.createElement('button') myCenteredButton.textContent = 'Here is my centered button' // Before inserting it to the DOM, add your style myCenteredButton.style.display = 'block' myCenteredButton.style.margin = '0 auto' // Insert to DOM document.body.append(myCenteredButton)
// Create button var myCenteredButton = document.createElement('button') myCenteredButton.textContent = 'Here is my centered button' // Before inserting it to the DOM, add a class for styling with css myCenteredButton.classList.add('center-me') // Insert to DOM document.body.append(myCenteredButton)
.center-me { display: block; margin: 0 auto; }
If I understand you correctly you want to center an already created button, it could work something like this:如果我理解正确,你想将一个已经创建的按钮居中,它可以像这样工作:
<!--In only HTML-->
<button style="position: absolute; left: 50%; transform: translateX(-50%);">Click Me</button>
Another way to do it is to set an id to the button and then center it in a separate CSS file or in the <style> tag like so:另一种方法是为按钮设置一个 id,然后将它放在一个单独的 CSS 文件或 <style> 标签中,如下所示:
<!--HTML-->
<button id="myButton">Click Me</button>
/*
CSS
Remember to use a # before the name because it's an id you're trying to reach
*/
#myButton {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Or you could use JavaScript with the same HTML base或者您可以使用具有相同 HTML 基础的 JavaScript
<!--HTML-->
<button id="myButton">Click Me</button>
And then in a separate JavaScript file or in the <script> tag然后在单独的 JavaScript 文件或 <script> 标签中
// Javascript
let myButton = document.querySelector("#myButton"); myButton.style.position = "absolute";
myButton.style.left = "50%";
myButton.style.transform = "translateX(-50%)";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.