Как я могу получить этот div по центру по горизонтали? - PullRequest
Новая
       6

Как я могу получить этот div по центру по горизонтали?

0 голосов
/ 11 июня 2018

Я создаю страницу с помощью текстового редактора, и я могу получить все, кроме текстового редактора, по центру.

Все, кроме элементов в div с id #texteditor, центрированы.Вот 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>

Заранее благодарю за помощь!Я также буду признателен за любую другую критику моего кода.

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Я удалил ширину 60% из # заголовка, # textarea и применил к # 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>
0 голосов
/ 11 июня 2018

margin-left: 200px отлично работает для кода.Он расположен посередине.

div # texteditor {

ширина: 900px;

высота: 300px;

поле слева: 200px;

}

0 голосов
/ 11 июня 2018

добавьте 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>
...