CSS中的文本居中或左边距和右边距不居中按钮
Posted
技术标签:
【中文标题】CSS中的文本居中或左边距和右边距不居中按钮【英文标题】：Text align center or margin left and margin right not centering button in CSS 【发布时间】：2021-04-27 07:23:51 【问题描述】：我在我的 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>文本框居中，但按钮不居中。
谢谢！ 伊凡
【问题讨论】：
您有一些非常混乱的 HTML，这可能是导致问题的原因。尝试通过验证器 validator.w3.org/#validate_by_input 运行您的 HTML 详细说明@RobertAKARobin 的评论：在代码合并之前，2 个正文开始标签紧随其后。 html结束标记后的脚本标记。 【参考方案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
【讨论】：
【参考方案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>【讨论】：
【参考方案3】：而不是将对齐项应用到正文作为中心 试试这个。不需要单一的 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中的文本居中或左边距和右边距不居中按钮的主要内容，如果未能解决你的问题，请参考以下文章