试图在我的页面中心对齐 html 按钮 [英] trying to align html button at the center of the my page

问题描述

无论使用何种浏览器，我都试图将 HTML 按钮准确地对齐到页面的中心.它要么向左浮动，同时仍处于垂直中心，要么位于页面上的某个位置，例如页面顶部等.

我希望它在垂直和水平方向都居中.这是我现在写的:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">我的按钮名称

解决方案

这是你的解决方案:JsFiddle

基本上，将您的按钮放入带有居中文本的 div 中:

<button class="button">Button</button>

具有以下样式:

.wrapper {文本对齐:居中；}.按钮 {位置:绝对；顶部:50%；}

给猫剥皮的方法有很多种，这只是一种.

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc..

I want it to be both vertically and horizontally be centered. Here is what I have written right now:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button> 

解决方案

Here's your solution: JsFiddle

Basically, place your button into a div with centred text:

<div class="wrapper">
    <button class="button">Button</button>
</div>

With the following styles:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

There are many ways to skin a cat, and this is just one.

这篇关于试图在我的页面中心对齐 html 按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！