尽管应用了正确的 CSS 规则，但按钮没有水平居中 [重复]

Posted 2023-03-05

技术标签:

【中文标题】尽管应用了正确的 CSS 规则，但按钮没有水平居中 [重复]【英文标题】：button not being centered horizontally despite applying correct CSS rule [duplicate] 【发布时间】：2021-07-27 04:16:00 【问题描述】：

我去了 W3 学校网站，他们说为了使元素水平居中，我必须将边距设置为 0，并将宽度设置为除 100% 之外的任何值。我做到了。我的意思是我将宽度设置为 50%。然而我的按钮没有居中。请帮忙。另外，如果您也知道如何使元素垂直居中，请给我留言。

const image = document.getElementById("image");
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from(length: 7, (item, i) => 
  return new Date(0,0,i).toLocaleDateString("en-US", weekday: "long")
)
var today = daysOfWeek[date];
const names = 
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",


btn.addEventListener("click", function() 
  date >= 0 && date < 2 ? personPaying = `today is $today so $names[today] is footing the bill`
  : date >= 2 && date < 4 ? personPaying = `today is $today $names[today] is paying`
  : date >= 4 && date < 6 ?   personPaying = `Hi $names[today], today is $today so although we are in Amsterdam we're not going ducth`
  : personPaying = `Hi $names[today], today is $today, your turn to pay today`

  btn.style.display = "none";

  <!-- message to the person paying -->
  let message = document.getElementsByClassName("message")[0];
  message.style.display = "block";
  message.textContent = personPaying;

  <!--avatar of person paying -->
  image.src = `picture/$names[today].png`;
  image.alt = "picture of an avatar";

  <!--displaying <i/> tags -->
  var unseenArray = [...document.getElementsByClassName("unseen")]
  unseenArray.map(x => x.style.display = "inline");

  <!--displaying containers and setting height -->
  let containers = document.getElementsByClassName("containers");
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.display = "block";
  
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.height = "920px";
  

  <!-- floating divs with class container to left -->
  for(var i = 0; i < containers.length; i++) 
    containers[i].style.cssFloat = "left"
  
  document.getElementsByTagName("h1")[0].textContent = `Hi $names[today] select you mehtod of payment`
, false);

button 
  box-shadow: 5px 10px;
  font-family: 'Krona One', "sans-serif";
  font-size: 30px;
  font-weight: light;
  padding: 10px;
  transition: 0.5s;
  width: 50%;
  margin: auto;



button:hover 
  box-shadow: 5px 10px;


body 
background-color: rgb(180, 180, 180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;


.message 
  border-style: inset;
  border-width: medium;
  border-radius: 15px;
  box-shadow: 5px 10px;
  display: none;
  padding: 20px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  font-family: "Copperplate", "Papyrus", "fantasy";
  font-size: 50px;
  font-variant: "small-caps";
  margin: 100px 50px 75px 100px;


div.containers 
  width: 400px;
  height: 400px;
  margin: 50px;
  display: none;



i.unseen 
  display: none;
  max-width: 100px;
  margin-top: 15px;


img 
  box-shadow: 5px 10px;
  width: 30%;
  float: right;
  top: 0px;


h1 
  font-family: "Copperplate", "Papyrus", "fantasy";

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Who's buying today</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>


  </head>
  <body>
    <button id="btn" type="submit">who's paying</button>
    <div class="containers">
      <div class="message"></div>
      <img id="image" src="">
    </div>

    <div class="containers">
      <h1></h1>
      <a href="form.html"><i class="fab fa-cc-visa unseen"></i></a>
      <i class="far fa-money-bill-alt unseen"></i>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

【问题讨论】：

【参考方案1】：

将display: block; 添加到您的button 以使其应用居中margin: auto。

const image = document.getElementById("image");
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from(length: 7, (item, i) => 
  return new Date(0,0,i).toLocaleDateString("en-US", weekday: "long")
)
var today = daysOfWeek[date];
const names = 
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",


btn.addEventListener("click", function() 
  date >= 0 && date < 2 ? personPaying = `today is $today so $names[today] is footing the bill`
  : date >= 2 && date < 4 ? personPaying = `today is $today $names[today] is paying`
  : date >= 4 && date < 6 ?   personPaying = `Hi $names[today], today is $today so although we are in Amsterdam we're not going ducth`
  : personPaying = `Hi $names[today], today is $today, your turn to pay today`

  btn.style.display = "none";

  <!-- message to the person paying -->
  let message = document.getElementsByClassName("message")[0];
  message.style.display = "block";
  message.textContent = personPaying;

  <!--avatar of person paying -->
  image.src = `picture/$names[today].png`;
  image.alt = "picture of an avatar";

  <!--displaying <i/> tags -->
  var unseenArray = [...document.getElementsByClassName("unseen")]
  unseenArray.map(x => x.style.display = "inline");

  <!--displaying containers and setting height -->
  let containers = document.getElementsByClassName("containers");
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.display = "block";
  
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.height = "920px";
  

  <!-- floating divs with class container to left -->
  for(var i = 0; i < containers.length; i++) 
    containers[i].style.cssFloat = "left"
  
  document.getElementsByTagName("h1")[0].textContent = `Hi $names[today] select you mehtod of payment`
, false);

button 
  box-shadow: 5px 10px;
  font-family: 'Krona One', "sans-serif";
  font-size: 30px;
  font-weight: light;
  padding: 10px;
  transition: 0.5s;
  width: 50%;
  margin: auto;
  display: block;



button:hover 
  box-shadow: 5px 10px;


body 
background-color: rgb(180, 180, 180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;


.message 
  border-style: inset;
  border-width: medium;
  border-radius: 15px;
  box-shadow: 5px 10px;
  display: none;
  padding: 20px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  font-family: "Copperplate", "Papyrus", "fantasy";
  font-size: 50px;
  font-variant: "small-caps";
  margin: 100px 50px 75px 100px;


div.containers 
  width: 400px;
  height: 400px;
  margin: 50px;
  display: none;



i.unseen 
  display: none;
  max-width: 100px;
  margin-top: 15px;


img 
  box-shadow: 5px 10px;
  width: 30%;
  float: right;
  top: 0px;


h1 
  font-family: "Copperplate", "Papyrus", "fantasy";

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Who's buying today</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>


  </head>
  <body>
    <button id="btn" type="submit">who's paying</button>
    <div class="containers">
      <div class="message"></div>
      <img id="image" src="">
    </div>

    <div class="containers">
      <h1></h1>
      <a href="form.html"><i class="fab fa-cc-visa unseen"></i></a>
      <i class="far fa-money-bill-alt unseen"></i>
    </div>

    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

【讨论】：

【参考方案2】：

使用 flexbox 垂直和水平居中：

body 
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

const image = document.getElementById("image");
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry"];
const date = new Date().getDay();
const daysOfWeek = Array.from(
  length: 7
, (item, i) => 
  return new Date(0, 0, i).toLocaleDateString("en-US", 
    weekday: "long"
  )
)
var today = daysOfWeek[date];
const names = 
  "Monday": "emilie",
  "Tuesday": "emilie",
  "Wednesday": "jessica",
  "Thursday": "jessica",
  "Friday": "paul",
  "Saturday": "paul",
  "Sunday": "pierre",


btn.addEventListener("click", function() 
  date >= 0 && date < 2 ? personPaying = `today is $today so $names[today] is footing the bill` :
    date >= 2 && date < 4 ? personPaying = `today is $today $names[today] is paying` :
    date >= 4 && date < 6 ? personPaying = `Hi $names[today], today is $today so although we are in Amsterdam we're not going ducth` :
    personPaying = `Hi $names[today], today is $today, your turn to pay today`

  btn.style.display = "none";

  <!-- message to the person paying -->
  let message = document.getElementsByClassName("message")[0];
  message.style.display = "block";
  message.textContent = personPaying;

  <!--avatar of person paying -->
  image.src = `picture/$names[today].png`;
  image.alt = "picture of an avatar";

  <!--displaying <i/> tags -->
  var unseenArray = [...document.getElementsByClassName("unseen")]
  unseenArray.map(x => x.style.display = "inline");

  <!--displaying containers and setting height -->
  let containers = document.getElementsByClassName("containers");
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.display = "block";
  
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.height = "920px";
  

  <!-- floating divs with class container to left -->
  for (var i = 0; i < containers.length; i++) 
    containers[i].style.cssFloat = "left"
  
  document.getElementsByTagName("h1")[0].textContent = `Hi $names[today] select you mehtod of payment`
, false);

html,
body 
  height: 100vh;
  margin: 0;
  padding: 0;


body 
  display: flex;
  justify-content: center;
  align-items: center;


button 
  box-shadow: 5px 10px;
  font-family: 'Krona One', "sans-serif";
  font-size: 30px;
  font-weight: light;
  padding: 10px;
  transition: 0.5s;
  width: 50%;
  margin: auto;


button:hover 
  box-shadow: 5px 10px;


body 
  background-color: rgb(180, 180, 180);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
  background-size: auto;


.message 
  border-style: inset;
  border-width: medium;
  border-radius: 15px;
  box-shadow: 5px 10px;
  display: none;
  padding: 20px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  font-family: "Copperplate", "Papyrus", "fantasy";
  font-size: 50px;
  font-variant: "small-caps";
  margin: 100px 50px 75px 100px;


div.containers 
  width: 400px;
  height: 400px;
  margin: 50px;
  display: none;


i.unseen 
  display: none;
  max-width: 100px;
  margin-top: 15px;


img 
  box-shadow: 5px 10px;
  width: 30%;
  float: right;
  top: 0px;


h1 
  font-family: "Copperplate", "Papyrus", "fantasy";

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Who's buying today</title>
  <link rel="stylesheet" href="index.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>


</head>

<body>
  <button id="btn" type="submit">who's paying</button>
  <div class="containers">
    <div class="message"></div>
    <img id="image" src="">
  </div>

  <div class="containers">
    <h1></h1>
    <a href="form.html"><i class="fab fa-cc-visa unseen"></i></a>
    <i class="far fa-money-bill-alt unseen"></i>
  </div>

  <script src="index.js" type="text/javascript"></script>
</body>

</html>

【讨论】：

以上是关于尽管应用了正确的 CSS 规则，但按钮没有水平居中 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

中心按钮 (HTML CSS)

CSS flex-box：尽管 justify-content 和 align-items 设置正确，但文本并不完全居中

在 CSS 和按钮对齐方面遇到了麻烦

如何使用 CSS 将绝对 div 水平居中？

正确居中