Блог

Я пытаюсь реализовать текст и кнопку рядом друг с другом в центре div относительно небольшой высоты.

В настоящее время я создал div шириной 100% и высотой 70 пикселей и добавил текст, расположенный по центру в середине div. Я хочу создать кнопку, которая будет находиться рядом с текстом.

Вот код:

 var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);
$("#bar").css("background-color", "white");

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold"
});

$("#bar").append("SOME TEXT");
 

Желаемый результат:

[[———{» Кнопка «КАКОЙ-НИБУДЬ ТЕКСТ»}———]]

Эта кнопка {«НЕКОТОРЫЙ ТЕКСТ»} должна быть в середине этого div.

Любая помощь будет высоко оценена.

Вы можете применить этот CSS, это решит вашу проблему.

 div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
}
 

Html, который вы можете написать, это просто пример того, что вы ищете.

 <div>
  <p>This is a paragraph.</p>
  <button>Click me button</button>
</div>
 

Помимо того, что Максим Лонуа уже сказал вам, вы также должны добавить нужную кнопку. Вот полный пример:

 var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold",
  "background-color": "white"
});

$("#bar").append("SOME TEXT");
$("#bar").append("<button>Whatever</button>");

$("#bar button").css("margin", "10px"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Просто создайте div со свойством display:flex; и добавьте 2 элемента (текст и кнопку) внутри этого div

Вот рабочий пример:

 #bar{
  width:100%;
  height:70px;
  background:#000;
}

.container{
  display:flex;
  justify-content:center;
  color:#fff;
} 

 <div id="bar">
<div class="container"><p>SOME TEXT</p><input type="button" value="Some Button"></div>
</div> 

Редактировать: после тестирования вашего кода кажется, что он уже работает, но вы забыли добавить кнопку $("#bar").append("<button>Some Button</button>");

Вот ваш рабочий пример

 var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);
$("#bar").css("background-color", "white");

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold"
});

$("#bar").append("SOME TEXT");
$("#bar").append("<button>Some Button</button>"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Перед использованием узла с помощью jQuery вам нужно будет добавить его в тело документа:

 var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);
$("#bar").css("background-color", "white");

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold"
});

$("#bar").append("SOME TEXT"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Это можно сделать, если вы используете выравнивание текста на панели, а затем устанавливаете внутренние элементы для отображения встроенного блока. Смотрите Пример скрипки здесь:

 #bar {
  width: 100%;
  height: 70px;
  text-align: center;
}
#bar p {
  display: inline-block;
}
.buttonExample {
  padding: 5px 10px;
  display: inline-block;
  color: white;
  background-color: red;
  border-radius: 4px;
}
<div id="bar">
  <p>
  Some Text
  </p>
  <div class="buttonExample">
    Button
  </div>
</div>
 

https://jsfiddle.net/54wrj0t9/

Оберните кнопку и текст в контейнер div. Чтобы выровнять этот div по вертикали до середины a) используйте flexbox, если у вас есть относительная высота. https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering / b) Присвоите оболочке Div абсолютную высоту и выровняйте ее по полям.

Для выравнивания кнопки рядом с текстом используйте display:inline-block;

Надеюсь, это полезно!