How can I get this div to center horizontally?

Question

I'm creating a page with a text editor and I can get everything but the text editor to center.

Everything except the elements within the div with the id #texteditor are centered. Here is the css for another element on the page, which I centered successfully, and the text editor:

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>

Thank you in advance for your help! I'll also appreciate any other critique of my code.

Please provide the generated HTML in the question itself. I don't think it's very respectful of volunteers' time to make them go elsewhere to answer a question. — Heretic Monkey, Jun 11 '18 at 16:17
Can you create a jsfiddle example so we can just modify and view there — StefanBob, Jun 11 '18 at 16:18
Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — manAbl, Jun 11 '18 at 16:27

score 0 · Answer 1 · answered Jun 11 '18 at 16:21

add margin: 0 auto; to the header and textarea since they're separate, or wrap them into a div and do that to it.

* {
  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>

score 0 · Answer 2 · answered Jun 11 '18 at 18:29

I have removed the width 60% from #header,#textarea and applied to #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>

score 0 · Answer 3 · answered Jun 11 '18 at 18:44

0

margin-left:200px works fine for the code. It is placed in the middle.

div#texteditor {

width: 900px;

height: 300px;

margin-left: 200px;

}

answered Jun 11 '18 at 18:44

shivam141296

26
3

How can I get this div to center horizontally?

3 Answers3