如何让这个div水平居中？

时间：2018-06-11 16:13:28

标签： html css centering

我正在使用文本编辑器创建一个页面，除了文本编辑器之外，我可以获得所有内容。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

提前感谢您的帮助！我还要感谢对我的代码的任何批评。

3 个答案:

答案 0 :(得分：0)

将margin: 0 auto;添加到标题和textarea，因为它们是分开的，或者将它们包装成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>

答案 1 :(得分：0)

我已从＃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>

答案 2 :(得分：0)

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

div＃texteditor {

宽度：900px;

身高：300px;

margin-left：200px;

}

相关问题
最新问题