如何让这个 div 水平居中？

【问题标题】：How can I get this div to center horizontally?如何让这个 div 水平居中？
【发布时间】：2018-06-12 02:44:19
【问题描述】：

我正在使用文本编辑器创建一个页面，我可以让除文本编辑器之外的所有内容居中。

除了 id 为 #texteditor 的 div 中的元素之外的所有内容都居中。这是页面上另一个元素的 css，我成功地居中，以及文本编辑器：

header {
  background-color: #00B7FF;
  color: white;
  width: 100%;
  height: 150px;
  display: inline-block;
  text-align: center;
  padding: 10px;
}

body {
  padding: 50px;
  font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

h1 {
  text-align: center;
}

p {
  display: inline;
}

form {
  margin-top: 30px;
}

button {
  margin: 0 5px;
  display: inline-block;
}

input {
  margin: 10px;
}

table {
  background-color: #e0e0e0;
  width: 800px;
  margin: 50px auto;
  font-size: 20px;
}

div#texteditor {
  width: 900px;
  height: 300px;
  margin: 0 auto;
}

div#header {
  border-bottom: none;
  width: 60%;
  padding: 10px;
  background-color: #e0e0e0;
  color: white;
  border-radius: 8px 8px 0 0;
}

div#textArea {
  border: 2px solid #e0e0e0;
  height: 100%;
  width: 60%;
}

iframe#wysiwyg {
  height: 100%;
  width: 60%;
}

.btn {
  background-color: DodgerBlue;
  /* Blue background */
  border: none;
  /* Remove borders */
  color: white;
  /* White text */
  padding: 12px 16px;
  /* Some padding */
  font-size: 16px;
  /* Set a font size */
  cursor: pointer;
  /* Mouse pointer on hover */
}

.btn-primary {
  margin: 10px;
  display: inline;
}

.btn-white {
  background-color: white;
  color: #00B7FF;
}

.container {}

.inline {
  display: inline;
}

.row {
  margin: inherit;
}

.form {
  width: 900px;
  margin: 0 auto;
}

.form-header {
  display: inline-block;
  text-align: center;
  width: 990px;
  margin: 0 auto;
}

.centered-form {
  width: 1000px;
  margin: 0 auto;
}

.centered-text {
  display: inline;
  text-align: center;
}

.centered-textfields {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.centered-buttons {
  width: 208px;
  margin: auto;
}

.emptyspace {
  margin-top: 50px;
}

[login] {
  float: right;
}
<h1>New Study Guide</h1>
<div class="container emptyspace">
  <div class="centered-form">

    <div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
      <p>or create one from scratch.</p>
    </div>
    <div class="form emptyspace">
      <div id="texteditor">
        <div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
          <!-- removed for brevity-->
        </div>
        <div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
      </div>
    </div>
  </div>
</div>

提前感谢您的帮助！我也会感谢对我的代码的任何其他批评。

【问题讨论】：

  • 请在问题本身中提供生成的 HTML。我不认为这是非常尊重志愿者的时间让他们去其他地方回答问题。
  • 你能不能创建一个 jsfiddle 例子，这样我们就可以在那里修改和查看
  • How to vertically center a div for all browsers?的可能重复

标签： html css centering


【解决方案1】：

将margin: 0 auto; 添加到标题和文本区域，因为它们是分开的，或者将它们包装到一个 div 中并对其执行此操作。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-header {
  display: inline-block;
  text-align: center;
  width: 990px;
  margin: 0 auto;
}

div#texteditor {
  width: 900px;
  height: 300px;
  margin: 0 auto;
}

header {
  background-color: #00B7FF;
  color: white;
  width: 100%;
  height: 150px;
  display: inline-block;
  text-align: center;
  padding: 10px;
}

body {
  padding: 50px;
  font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

h1 {
  text-align: center;
}

p {
  display: inline;
}

form {
  margin-top: 30px;
}

button {
  margin: 0 5px;
  display: inline-block;
}

input {
  margin: 10px;
}

table {
  background-color: #e0e0e0;
  width: 800px;
  margin: 50px auto;
  font-size: 20px;
}

div#texteditor {
  width: 900px;
  height: 300px;
  margin: 0 auto;
}

div#header {
  border-bottom: none;
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  background-color: #e0e0e0;
  color: white;
  border-radius: 8px 8px 0 0;
}

div#textArea {
  border: 2px solid #e0e0e0;
  height: 100%;
  width: 60%;
  margin: 0 auto;
}

iframe#wysiwyg {
  height: 100%;
  width: 60%;
}

.btn {
  background-color: DodgerBlue;
  /* Blue background */
  border: none;
  /* Remove borders */
  color: white;
  /* White text */
  padding: 12px 16px;
  /* Some padding */
  font-size: 16px;
  /* Set a font size */
  cursor: pointer;
  /* Mouse pointer on hover */
}

.btn-primary {
  margin: 10px;
  display: inline;
}

.btn-white {
  background-color: white;
  color: #00B7FF;
}

.container {}

.inline {
  display: inline;
}

.row {
  margin: inherit;
}

.form {
  width: 900px;
  margin: 0 auto;
}

.form-header {
  display: inline-block;
  text-align: center;
  width: 990px;
  margin: 0 auto;
}

.centered-form {
  width: 1000px;
  margin: 0 auto;
}

.centered-text {
  display: inline;
  text-align: center;
}

.centered-textfields {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.centered-buttons {
  width: 208px;
  margin: auto;
}

.emptyspace {
  margin-top: 50px;
}

[login] {
  float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<h1>New Study Guide</h1>
<div class="container emptyspace">
  <div class="centered-form">
    <div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
      <p>or create one from scratch.</p>
    </div>
    <div class="form emptyspace">
      <div id="texteditor">
        <div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
          <!-- removed for brevity-->
        </div>
        <div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
      </div>
    </div>
  </div>
</div>

【讨论】：

    【解决方案2】：

    我已从#header、#textarea 中删除了 60% 的宽度并应用于#texteditor。

    header {
  background-color: #00B7FF;
  color: white;
  width: 100%;
  height: 150px;
  display: inline-block;
  text-align: center;
  padding: 10px;
}

body {
  padding: 50px;
  font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

h1 {
  text-align: center;
}

p {
  display: inline;
}

form {
  margin-top: 30px;
}

button {
  margin: 0 5px;
  display: inline-block;
}

input {
  margin: 10px;
}

table {
  background-color: #e0e0e0;
  width: 800px;
  margin: 50px auto;
  font-size: 20px;
}

div#texteditor {
  width: 60%;
  height: 300px;
  margin: 0 auto;
}

div#header {
  border-bottom: none;
  padding: 10px;
  background-color: #e0e0e0;
  color: white;
  border-radius: 8px 8px 0 0;
}

div#textArea {
  border: 2px solid #e0e0e0;
  height: 100%;
}

iframe#wysiwyg {
  height: 100%;
  width: 60%;
}

.btn {
  background-color: DodgerBlue;
  /* Blue background */
  border: none;
  /* Remove borders */
  color: white;
  /* White text */
  padding: 12px 16px;
  /* Some padding */
  font-size: 16px;
  /* Set a font size */
  cursor: pointer;
  /* Mouse pointer on hover */
}

.btn-primary {
  margin: 10px;
  display: inline;
}

.btn-white {
  background-color: white;
  color: #00B7FF;
}

.container {}

.inline {
  display: inline;
}

.row {
  margin: inherit;
}

.form {
  width: 900px;
  margin: 0 auto;
}

.form-header {
  display: inline-block;
  text-align: center;
  width: 990px;
  margin: 0 auto;
}

.centered-form {
  width: 1000px;
  margin: 0 auto;
}

.centered-text {
  display: inline;
  text-align: center;
}

.centered-textfields {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

.centered-buttons {
  width: 208px;
  margin: auto;
}

.emptyspace {
  margin-top: 50px;
}

[login] {
  float: right;
}
    <h1>New Study Guide</h1>
<div class="container emptyspace">
  <div class="centered-form">

    <div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
      <p>or create one from scratch.</p>
    </div>
    <div class="form emptyspace">
      <div id="texteditor">
        <div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
          <!-- removed for brevity-->
        </div>
        <div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
      </div>
    </div>
  </div>
</div>

    【讨论】：

      【解决方案3】：

      margin-left:200px 适用于代码。放在中间。

      div#texteditor {

      宽度：900px；

      高度：300px；

      margin-left: 200px;

      }

      【讨论】：

        猜你喜欢
        • 2017-08-30
        • 2015-08-16
        • 2014-05-22
        • 2015-02-10
        • 2013-03-30
        • 2015-10-10
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode