在 CSS 中居中一个按钮

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

在 CSS 中居中一个按钮

作者：迹忆客最近更新：2023/04/27 浏览次数：

HTML 网页最精致的样式主要是通过 CSS 实现的。网页上组件的排列可以用CSS来控制。

有多种方法可以将按钮对齐到网页的中心。按钮的排列可以根据需要水平或垂直排列。

垂直和水平居中按钮

我们在这个例子中使用定位和变换属性来垂直和水平居中按钮元素：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  height: 200px;
  position: relative;
  border: 2px solid blue;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="container">
  <div class="center">
    <button>Button at the Center</button>
  </div>
</div>

</body>
</html>

在这里，我们设置了容器内按钮的视图，以清楚地显示居中对齐。

使按钮居中的不同方法

可以使用以下方法使按钮居中：

text-align: center - 输入父 div 标签的 text-align 属性值作为中心。
margin: auto - 将 margin 属性的值输入为 auto。
display: flex - 输入 display 属性的值以 flex 并将 justify-content 属性的值设置为 center。
display: grid - 输入显示属性的值作为网格。

还有更多其他方法可用于使按钮居中。

使用 text-align: center 使按钮居中

在下面的示例中，我们使用文本对齐属性并将其值设置为居中。这可以放在 body 标签或元素的父 div 标签中。

将 text-align: center 放置在按钮元素的父 div 标签中：

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container{
         text-align: center;
         border: 2px solid blue;
         width: 300px;
         height: 200px;
         padding-top: 100px;
         }
         #bttn{
         font-size: 18px;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <button id ="bttn"> Button at the Center </button>
      </div>
   </body>
</html>

将 text-align: center 放在 body 标签内：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <button>Button at the Center</button>
</body>
</html>

如有必要，将按钮移动到页面的正中央，应使用 padding-top 属性，但这不是使按钮居中的最佳方法。

使用 display: grid 和 margin: auto 居中按钮

在这里，我们使用 CSS 中的 display:grid 属性和 margin:auto 属性。在以下示例中，display:grid 放置在按钮元素的父 div 标记中：

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
         width: 300px;
         height: 300px;
         border: 2px solid blue;
         display: grid;
         }
         button {
         background-color: lightpink;
         color: black;
         font-size: 18px;
         margin: auto;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <button>Button at the Center</button>
      </div>
   </body>
</html>

在这里，按钮将被放置在垂直和水平位置的中心。

具有网格值的显示属性在容器内使用。因此，在按钮元素中使用 margin 属性为 auto 时，会影响容器，从而影响按钮。

这两个属性在使按钮居中方面起着至关重要的作用。

使用 display: flex 居中按钮

这是将按钮与中心对齐时最常用的方法。这里有三个属性：display: flex;、justify-content: center; 和 align-items: center; ，它们在使按钮居中方面起着至关重要的作用。

此示例演示按钮在垂直和水平位置的中心对齐。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
            width: 300px;
            height: 300px;
            border: 2px solid blue;
            display: flex;
            justify-content: center;
            align-items: center;
            }
            button {
            background-color: lightpink;
            color: black;
            font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <button>Button at the Center</button>
        </div>
    </body>
</html>

使按钮居中使用 position: fixed

我们从页面左侧留出 50% 的边距，然后设置 position: fixed ，在以下示例中，它只会占据正文中心的位置：

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
           position: fixed;
           left: 50%;
        }
    </style>
</head>
<body>
    <div class="button-container-div">
        <button>Button at the Center</button>
    </div>
</body>
</html>

在这里，按钮不适用于整个网页的中心。

居中两个或更多按钮

如果有两个或更多按钮，我们可以将所有这些按钮包装在一个 div 元素中，然后使用 flexbox 属性将按钮居中对齐。如果将两个按钮视为一个 div 元素，则所有属性都将应用于两者。

例如：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .flex-box {
            display: flex;
            }
            .jc-center {
            justify-content: center;
            }
            button.margin-right {
            margin-right: 20px;
            }
        </style>
    </head>
    <body>
        <div class="flex-box jc-center">
            <button type="submit" class="margin-right">Select</button>
            <button type="submit">Submit</button>
        </div>
    </body>
</html>

或者，我们可以按照以下示例使用 flexbox 将内联块和块元素居中：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .flex-box {
            display: flex;
            }
            .jc-center {
            justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="flex-box jc-center">
            <button type="submit">Select</button>
        </div>
        <br>
        <div class="flex-box jc-center">
            <button type="submit">Submit</button>
        </div>
    </body>
</html>

总结

有许多方法可以使用 CSS 和 HTML 中的不同属性使按钮居中。如上所述，结合 HTML 和 CSS 的各种属性，可以使用不同的方法轻松地在网页中制作一个或多个按钮中心。

上一篇：使用 CSS 的不透明度过渡

下一篇：使用 CSS 绝对定位居中 Div

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 Bootstrap CSS

发布时间：2023/04/28 浏览次数：59 分类：CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间：2023/04/28 浏览次数：107 分类：CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：123 分类：CSS

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间：2023/04/28 浏览次数：73 分类：CSS

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间：2023/04/28 浏览次数：108 分类：CSS

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间：2023/04/28 浏览次数：98 分类：CSS

在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 CSS 向上移动文本

发布时间：2023/04/28 浏览次数：153 分类：CSS

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

使用 CSS 和 JavaScript 制作文本闪烁

发布时间：2023/04/28 浏览次数：146 分类：CSS

本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。

CSS 防止文本选择

发布时间：2023/04/28 浏览次数：75 分类：CSS

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 Web 浏览器使用该属性。

迹忆客专注技术分享