Как правильно создать и расположить такой прямоугольник?

Question

[Иван Бабий]

Необходимо расположить этот прямоугольник в центре верхней части, и текст должен быть в центре этого прямоугольника. Не могу понять что делаю не так

Прилагаю код:

<div class="col-md-12 alltext">
					...
					<div class="col-md-12 rectangle"><span class="text-hp">КУПИТЬ ЧИТ</span></div>

.alltext {
 top: 170px;
 text-align: center;  
	              }
          .rectangle {
  border-style: solid;
  border-width: 3px;
  border-color: rgb(45, 222, 136);
  border-radius: 10px;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35),inset 0px 3px 16px 0px rgba(0, 0, 0, 0.35);
  width: 284px;
  height: 47px;
  }
	  
	  .text-hp {
  text-align: center;
  font-size: 18px;
  font-family: "Roboto Slab";
  color: rgb(29, 254, 148);
  font-weight: bold;
  line-height: 1.2;
 }

Answer 1

[Ivan Stroykin]

1 div, 1 class
codepen.io/StivinKing/pen/PWzmJB
p.s. лучше для кнопки использовать button

Comments

[Иван Бабий]

Спасибо большое

Answer 2

[Максим Тимофеев]

зачем col-md-12 у rectangle? Думаю в этом проблема.

Comments

[Иван Бабий]

Это часть BootStrap. При смене, ничего не меняется

[Максим Тимофеев]

Иван Бабий: Как это не поменяется, если для col-md-12 свои стили тянутся. Как минимум float: left;

[Иван Бабий]

Максим Тимофеев: в bootstrap 4 доведено все до ума, использовал код человека выше с col.. , все работает как по маслу

[Максим Тимофеев]

Иван Бабий: Что там доведено? float: left; убрали у колонок? Нет. Человек предложил код лучше чем у Вас, но и Ваш будет работать без col-md-12 у rectangle, потому что не центрируются плавающие блоки.