CSS Wrapper не будет выравниваться с его содержимым - PullRequest
Новая
       43

CSS Wrapper не будет выравниваться с его содержимым

0 голосов
/ 13 апреля 2020

Я пытался отцентрировать мою кнопку с помощью margin 0 auto; , но, похоже, он двигается больше вправо Эталонное изображение 1 вместе с моей линией jumbotron и когда я проверьте, что я увидел, что моя оболочка кнопки не была встроена в мою кнопку Эталонное изображение 2

Но когда я запустил здесь свой код, похоже, он работает нормально: 

.view-products {
  font-family: Bebas Neue;
  font-size: 20px;
  color: #fff;
  padding: 5px 15px;
  height: 160px;
  width: 115px;
  border-radius: 60% 60% 60% 60% / 75% 75% 45% 45%;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: 5px solid #fff;
  transition: 0.8s;
}

.view-products a {
  text-decoration: none;
  color: #fff;
}

.view-products:hover {
  background-color: #eb974e;
  color: #ffcb05;
}

.view-products a {
  color: #eb974e;
}

.button-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 115px;
}
<div class="row button-wrapper">
  <div class="col-12">
    <a href="products.html">
      <button type="button" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
    </a>
  </div>
</div>

Что мне делать с моей кнопкой, чтобы она выровнялась по своей оболочке?

Я уже пытался удалить другие объекты и имел те же результаты, что-то, должно быть, нажимало на мою кнопку, так как она была в центре, когда я прокручивал Эталонное изображение 3 , и это не lo go или navbar

Я новичок в веб-разработке, и это мой первый портфельный проект. Я был бы очень признателен всем, кто мог бы помочь мне решить эту проблему, поскольку я уже испробовал множество методов только для того, чтобы увидеть нет разница.

Ответы [ 3 ]

0 голосов
/ 13 апреля 2020

Я еще не уверен, что именно вы ищете, но я пытался сделать, основываясь на том, что я понял.

С btn-primary классом, я полагаю, вы используете bootstrap.

Во-первых, вам нужно исправить свой якорь и кнопку разметки. Обратитесь к приведенному ниже фрагменту, который может вам помочь.

Примечание: Если вам не нужно .row поле контейнера, чем удалить my-2. 

.view-products {
    width: 150px;
    height: 208px;
    display: block;
    background-image: url("https://i.imgur.com/PspKZF4.png");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row my-2">
    <div class="col-12 d-flex justify-content-center">
        <div class="view-products d-flex justify-content-center align-items-center">
            <a href="#" class="text-center">VIEW<br />PRODUCTS</a>
        </div>
    </div>
</div>
0 голосов
/ 13 апреля 2020

@ codelover Я думаю, я исправил это, но я изменил свой col-12 на col-13, но разве bootstrap не содержит только 12 столбцов? Контрольное изображение 

<div class="row button-wrapper">
  <div class="col-13">
    <button type="button" onclick="window.location.href='products.html'" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
  </div>
</div>
0 голосов
/ 13 апреля 2020

Попробуйте добавить "margin: 0 auto; padding: 0;" на «.view-product». Вы также можете попробовать 'float: right;' в '.view-product'

...