如何使元素居中并拥有自己的行答案

【问题标题】：How to Center an element and have a own line如何使元素居中并拥有自己的行
【发布时间】：2023-01-26 18:42:04
【问题描述】：

我希望我的这个项目的样式必须在中心对齐，但它确实有效，特别是对于转换器选项卡，我希望每个元素都有自己的行并且必须在 div 容器内居中。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: block;
  align-items: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div class="container">
    <div class="converter-tab">
      <h2>Metric/Imperial Unit Conversion</h2>
      <input type="text" id="input-el" class="converter-input" />
      <button class="converter-btn" id="convert-btn">Convert</button>
    </div>

    <div class="output">
      <div class="length" id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p class="" id="output-el"></p>
      </div>

      <div class="volume" id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p class="" id="output-el2"></p>
      </div>
      <div class="mass" id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p class="" id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

我尝试了显示块和内联块，但容器内的元素没有移动。

【问题讨论】：

标签： html css frontend

【解决方案1】：

我认为容器类是已实现的类，因为他是包含“converter-tab”div 的一般 div 中的容器类，元素不居中的原因是 padding 和 margin css 类。尝试删除它或用这个替换它：

.container {
  margin:  auto;
}

【讨论】：

【解决方案2】：

在这种情况下你真正需要做的是分配一个属性text-align: center 到你的 .converter-tab 类，而且你必须将你的 h2、input 和 button 分别包装在每个单独的 div 中。

您可以在下面查看我的工作 sn-p：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: block;
  align-items: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
  text-align: center;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div class="container">
    <div class="converter-tab">
       <div><h2>Metric/Imperial Unit Conversion</h2></div>
       <div><input type="text" id="input-el" class="converter-input" /></div>
       <div><button class="converter-btn" id="convert-btn">Convert</button></div>
    </div>

    <div class="output">
      <div class="length" id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p class="" id="output-el"></p>
      </div>

      <div class="volume" id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p class="" id="output-el2"></p>
      </div>
      <div class="mass" id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p class="" id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

【讨论】：

【解决方案3】：

我在下面注释了你的 CSS。我已将您的输入 div 子元素设置为 block level elements，以便它们出现在自己的行中。然后我向它们添加了margin: auto，使它们居中。我使用 text-align: center 将文本与中心对齐；

对齐始终是一个 PITA（现在越来越少了）但是有一个方便的工具可以帮助你：howtocenterincss.com

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-tab > * {
  display: block; /* make each item a block element so it appears on its own line */
  text-align: center; /* make text (e.g. inside <p> tags) centered */
  margin-inline: auto; /* make block level elements centered */
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  text-align: center; /* center the text in your output div */
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

<div class="container">
  <div class="converter-tab">
    <h2>Metric/Imperial Unit Conversion</h2>
    <input type="text" id="input-el" class="converter-input" />
    <button class="converter-btn" id="convert-btn">Convert</button>
  </div>

  <div class="output">
    <div class="length" id="length-el">
      <h2>Length (Meter/Feet)</h2>
      <p class="" id="output-el"></p>
    </div>

    <div class="volume" id="volume-el">
      <h2>Volume (Liters/Gallons)</h2>
      <p class="" id="output-el2"></p>
    </div>
    <div class="mass" id="mass-el">
      <h2>Mass (Kilograms/Pounds)</h2>
      <p class="" id="output-el3"></p>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

由于主流浏览器都支持它，所以我会使用 flex：只需将容器 div 的显示模式更改为flex，设置flex-direction: column; 和justify-content: center;。在此之后根据您的喜好调整顶部和底部填充。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div class="container">
    <div class="converter-tab">
      <h2>Metric/Imperial Unit Conversion</h2>
      <input type="text" id="input-el" class="converter-input" />
      <button class="converter-btn" id="convert-btn">Convert</button>
    </div>

    <div class="output">
      <div class="length" id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p class="" id="output-el"></p>
      </div>

      <div class="volume" id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p class="" id="output-el2"></p>
      </div>
      <div class="mass" id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p class="" id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

【讨论】：