маржа - любопытное поведение - PullRequest
Новая
       8

маржа - любопытное поведение

0 голосов
/ 24 мая 2018

У меня следующая проблема.Когда я пытаюсь расположить свою кнопку, используя 

margin: 0 auto;

, она удерживает кнопку влево.Если я наберу любое число, например. 

margin: 0 100px;

, оно сработает.Мне любопытно, чего мне не хватает?У меня есть 

display: block;
width: 200px;

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

это мой HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

и CSS 

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}

Спасибозаранее Роберт

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Как VXp уже писал в своем комментарии: Чтобы горизонтально центрировать абсолютно позиционированный элемент внутри его контейнера, вам нужно left: 50% (который перемещает его левую границу к середине) и transform: translateX(-50%) (который перемещает элемент назад влево на половинуего собственной ширины) - см. фрагмент ниже, где это единственные изменения в данном коде.(и margin: 0 auto в этом случае ничего не сделает, так как position: absolute) 

.container {
  width: 1100px;
  height: 100vh;
  margin: 0 auto;
  background-color: black;
  position: relative;
}

.group {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(53, 20, 131);
  position: absolute;
}

.element {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-color: rgb(131, 20, 44);
  position: absolute;
}

.btn {
  display: block;
  position: absolute;
  bottom: 3%;
  width: 200px;
  height: 46px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #fff;
  text-align: center;
  text-transform: capitalize;
  padding: 14px 0 0 0;
  font-size: 1em;
  font-weight: 100;
  text-decoration: none;
  color: rgb(119, 20, 20);
  border-radius: 25px;
  letter-spacing: 3px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>

<body>
  <div class="container">
    <div class="group">
      <div class="element">

      </div>
    </div>
    <a href="#" class="btn">button</a>
  </div>
</body>

</html>
0 голосов
/ 24 мая 2018

Причина, по которой ваш margin: auto; не работает, заключается в том, что ваша кнопка имеет position: absolute;

. Конечно, вы хотите решить эту проблему без изменения положения элементов.С position: absolute; вы можете использовать свойства left и right : left: 0; и right: 0;, при этом элемент будет отцентрирован относительно абсолютной позиции относительно (ширины) егородительский объект, который имеет относительную позицию.

Для более удобного просмотра просмотрите фрагмент кода ниже на полной странице. 

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    left: 0; /* added */
    right: 0; /* added */
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>
0 голосов
/ 24 мая 2018

Из-за абсолютной позиции, если вы хотите отцентрировать, попробуйте добавить это в ваш код: 

.btn{
left: 50%;
transform: translateX(-50%);

}

...