CSS 中的文本居中或左对齐和右对齐不居中按钮

Question

我在 HTML 中添加了一个按钮，并希望将其居中。我尝试了标题中的两种方式，但都没有用。我是 HTML 和 CSS 的新手。我使用 CSS 将它居中，但如果有办法使用 HTML 来实现它，我可以接受。

div {
  text-align: center;
}

body {
  text-align: center;
}

input[type=text] {
  width: 110%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div {
  height: 10em;
  position: relative
}

html {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

body {
  background: linear-gradient(-20deg, #e73c7e, #23a6d5, #23d5ab);
  background-size: 1000000% 1000000%;
}

button {
  margin-left: auto;
  margin-right: auto;
}

<div id="typing-area">
  <input type="text">
  <button>Enter</button>
  <h1>
    bocho is cool
  </h1>
</div>

文本框居中，但按钮不居中。

谢谢！伊尔凡

Answer 1

因为您将输入的大小设置为 110% 并将正常页面大小保留为 100%，所以它会推出输入。

input[type=text] {
  width: 100%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;            
}


margin-left: auto;
margin-right: auto;

你可以用这个代替上面的

margin:0 auto

Answer 2

您可以在父项上使用 flex 属性来对齐项目。

您不需要在按钮元素上添加任何 css。这是更好的新方法。

div#typing-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type=text] {
  width: 110%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div {
  height: 10em;
  position: relative
}

html {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

body {
  background: linear-gradient(-20deg, #e73c7e, #23a6d5, #23d5ab);
  background-size: 1000000% 1000000%;
}

<div id="typing-area">
  <input type="text">
  <button>Enter</button>
  <h1>
    bocho is cool
  </h1>
</div>

Answer 3

而不是将对齐项目应用到 body 作为中心试试这个。不需要单一 CSS 样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css "rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
</head>
<body>

    <div class="container row text-center">
        <div class="col-12">
            <input type="text" class="w-50 ">
            <button class="btn btn-primary ">Enter</button>
        </div>
        <div class="col-12">
            <h1>bocho is cool</h1>
        </div>
    </div>
   <script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"  integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"  crossorigin="anonymous"></script>
   <script src="script/script.js"></script>
</body>
</html>

它在所有 3 个视图中的响应都非常完美

CSS 中的文本居中或左对齐和右对齐不居中按钮

Text align center or margin left and margin right not centering button in CSS

html

css

center

margin