如何在div中居中不同的内容？ [复制]答案

【问题标题】：How to center different content in div? [duplicate]如何在div中居中不同的内容？ [复制]
【发布时间】：2021-09-14 06:53:32
【问题描述】：

我有一个div，旁边有一个标签，如下所示：

这就是我在Vue.js 中的html 的样子：

    <div style="margin-bottom: 15px;">
      <input
        id="newsletterRegister"
        type="checkbox"
        name="newsletterRegister"
        style="width: 30px"
      />
      <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
    </div>

我不知道如何将label 置于checkbox 旁边。我已经尝试了很多东西，但它似乎并没有奏效。感谢您的回答！

【问题讨论】：

标签： html css vue.js

【解决方案1】：

尝试使用flexbox

.center {
  display: flex;
  align-items: center;
}

<div style="margin-bottom: 15px" class="center">
  <input id="newsletterRegister" type="checkbox" name="newsletterRegister" style="width: 30px" />
  <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
</div>

【讨论】：

【解决方案2】：

只需将display: flex; align-items: center; 放在 div 样式中，它就可以完成这项工作

  <div style="margin-bottom: 15px; display: flex; align-items: center;">
      <input
        id="newsletterRegister"
        type="checkbox"
        name="newsletterRegister"
        style="width: 30px"
      />
      <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
    </div>

【讨论】：

【解决方案3】：

您可以像这样使用“垂直对齐”：

<div style="margin-bottom: 15px;">
      <input
        id="newsletterRegister"
        type="checkbox"
        name="newsletterRegister"
        style="width: 30px; vertical-align:bottom;"
      />
      <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
    </div>

或者您也可以将标签 (.newsletterRegister) line-height 样式设置为与复选框高度相同。

【讨论】：

【解决方案4】：

您可以使用display: flex; 和justify-content:center; 水平对齐项目，使用align-items: center 垂直对齐项目。如果这对您有用，请尝试运行 sn-p。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <div style="margin-bottom: 15px; display: flex; justify-content: center; align-items: center;">
    <input
     id="newsletterRegister"
     type="checkbox"
     name="newsletterRegister"
     style="width: 30px"
    />
    <label for="newsletterRegister">
     Do you want to receive email promotions?
    </label>
   </div>
  </body>
</html>

【讨论】：

【解决方案5】：

你可以使用中心标签

这是非常老式的，但它的工作原理。

【讨论】：

您不应该这样做，因为 <center> 已被弃用。你可以在这里阅读：<center>: The Centered Text element
好的，谢谢！我认为这可能有效