Задать вопрос
@roxynz

Почему не выравнивается блок по центру?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<title>Города-герои ВОВ </title>
</head>
<body>
<header>

<div class="header">
 <input type="checkbox" id="active">
 <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
 <div class="wrapper">
 <ul>
  <li><a href=index.html>Главная</a></li>
  <li><a href=list.html>Города</a></li>
  <li><a class="active" href="#">Автор и источники информации</a></li>
 </ul>
 </div>

 <div class="main-heading">
   <h1><span id="Автор и источники информации">Автор и источники информации</span></h1>
   
 </div>
 </div>
</header>

<div class="container">
  <div class="items">
    <div class="items-head">
      <p>UX DESIGN</p>
      <hr>
    </div>
    
    <div class="items-body">
      <div class="items-body-content">
        <span>Web Usabilty Testing</span>
        <i class="fa fa-angle-right"></i>
      </div>
      <div class="items-body-content">
        <span>Design of Everyday Things</span>
        <i class="fa fa-angle-right"></i>
      </div>
      <div class="items-body-content">
        <span>Practical Empathy: For Collaboration & Creativity in Your Work</span>
        <i class="fa fa-angle-right"></i>
      </div>
      <div class="items-body-content">
        <span>About Face: The Essentials of Interaction Design</span>
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
</div>
</body>
</html>


header {
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  box-sizing: border-box;
  
  
}

body {
 margin: 0;
 background-color: #FFEBCD;
}

header {
 margin: 0;
 font-family: 'Oswald', sans-serif;
 
 background-image: url(image/shapka.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 color: white;
 min-height: 40vh;
 padding: 0px;
 position: static;
 top: 0;
} 

.main-heading{
 max-width: 900px;
 text-align: center;
 margin: auto;

}

.main-heading h1{
 
 font-size: 100px;
 line-height: 100px;
}

main-heading p {
 font-size: 70px;
 line-height: 26px;
}

.header {
 overflow: hidden;
 line-height: 26px;
 padding: 40px 20px;
}

.wrapper{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
 /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  background: #000;
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
  clip-path: circle(75%);
}
.menu-btn{
  position: fixed;
  z-index: 1001;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
 /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
  background: #000;
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
  color: #fff;
}
#active:checked ~ .menu-btn i:before{
  content: "\f00d";
}
.wrapper ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  z-index: 999;
}
.wrapper ul li{
  margin: 15px 0;
  z-index: 1000;
}
.wrapper ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  border-radius: 50px;
  background: #000;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
  z-index: 999;
}
.wrapper ul li a:after{
  position: absolute;
  content: "";
  background: #fff;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
  width: 104%;
  height: 110%;
  left: -2%;
  top: -5%; /* if the font is 'Oswald'*/
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  animation: rotate 1.5s linear infinite;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #fff;
}
input[type="checkbox"]{
  display: none;
}

main {
 font-family: 'Pangolin', cursive;
}
* {
  box-sizing: border-radius;
  /*font-family: 'Rubik', sans-serif;*/
}
.container {
  border: 1px solid black;
  
  position: absolute;
  
  display: flex;
  align-items: center;
  
  
  /*place-items: center;*/
  /*тут был цвет всего*/
}

.items {
  
  width: 300px;
  
  
  background: $sec;
  box-shadow: 0 3px 6px rgba(black,0.16), 0 3px 6px rgba(black,0.23);
  border-top: 10px solid black;/*верхушка*/
}

.items-head p{
  padding: 5px 20px;
  margin: 10px;
  color: #0B5AA2;/*цвет заголовка*/
  font-weight: bold;
  font-size: 20px;
}

.items-head hr {
  width: 20%;
  margin: 0px 30px;
  border: 1px solid $dark-pri;/*цвет линии под заголовком*/
}

.items-body {
  padding: 10px;
  margin: 10px;
  display: grid;
  grid-gap: 10px;
}

.items-body-content {
  padding: 10px;
  padding-right: 0px;
  display: grid;
  grid-template-columns: 10fr 1fr;
  // background-color: lightblue;
  font-size: 13px;
  grid-gap: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  
}

.items-body-content:hover {
  border-radius: 15px;
  
  border: 1px solid black;/*цвет обрамления у ссылок*/
}

.items-body-content i {
  align-self: center;
  font-size: 15px;
  color: $dark-pri;/*цвет иконок стрелочек*/
  font-weight: bold;
  animation: icon 1.5s infinite forwards;
}

@keyframes icon {
  0%,100%{
    transform: translate(0px);
  }
  50% {
    transform: translate(3px);
  }
}
  • Вопрос задан
  • 65 просмотров
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
Добрый день!
1) Если необходимо оставить абсолютное позиционирование блока container.
Так как вы задали абсолютное позиционирование блоку container, то для него в стилях необходимо прописать
right: calc(50% - 150px);

Полностью стили для контейнера будут такие:
.container {
  position: absolute;
  right: calc(50% - 150px);
  border: 1px solid black;
  /*display: flex;*/
  /*align-items: center;*/
}

150px получилась так:
ширина внутреннего блока items 300px/2
Как это будет выглядеть смотрите по ссылке: https://codepen.io/lanacode/pen/PoyRmeX

2) Если же вы хотите использовать flexbox и позиционировать с помощью него, то абсолютное позиционирование убираем:
.container { 
  display: flex;
  justify-content: center;
  
  /*place-items: center;*/
  /*тут был цвет всего*/
}

+ переносим css свойство border блоку items:
.items {
  border: 1px solid black;  
  width: 300px; 
  background: $sec;
  box-shadow: 0 3px 6px rgba(black,0.16), 0 3px 6px rgba(black,0.23);
  border-top: 10px solid black;/*верхушка*/
}

Как это будет выглядеть смотрите по ссылке: https://codepen.io/lanacode/pen/PoyRmeX
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы