test #2

Выравнивание кнопки

by maxfloyd

HTML

<div class="main">
  <div class="content">
    <div class="block_left">
      <div class="video">ТИПО ВИДЕО</div>
    </div>
    <div class="block_right">
      <div class="text">Типо текст<br>Типо текст</div>
      <div class="button"><a href="">Кнопка</a></div>
    </div>
  </div>
</div>

CSS

.main {
  margin: 20px auto;
  width: 500px;
  height: 300px;
  background-color: #f1f1f1;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.content {
  display: flex;
  justify-content: center;
  margin: auto;
  height: 290px;
  width: 490px;
  background-color: red;
}

.block_left, .block_right {
  display: flex;
  flex-direction: column;
  height: 95%;
  width: 49%;
}

.block_left {
  background-color: blue;
}

.block_right {
  background-color: pink;
}

.text, .video {
  padding: 10px;
}

.button {
    margin: auto 5px 5px auto;
}

.button a {
  display: inline-block;
  background-color: #424147;
  color: #f1f1f1;
  padding: 5px;
  user-select: none;
  outline: none;
  text-decoration: none;
 }
 
 .button a:hover {
   background-color: black;
 }