Блог

Главная - Вопросы по программированию - Добавить круг между двумя вертикальными div в HTML

Добавить круг между двумя вертикальными div в HTML

#html #css

#HTML #css

Вопрос:

Как я могу добавить круг поверх двух вертикальных div в HTML? Мне удалось получить 2 вертикальных блока: введите описание изображения здесь

но я не могу понять, как создать круг посередине, как показано ниже:

введите описание изображения здесь

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

http://jsfiddle.net/wL9xoad3/

 .html {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.body {
  background-color: #000;
  font-family: "Open Sans", sans-serif;
  height: 100%;
}

.vidyard_padding {
  height: 100%;
}

.vc {
  display: table;
  height: 100%;
  width: 100%;
}

.vc-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.cta {
  background-color: #fff;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 640px;
}

.cta-full {
  height: 100%;
  width: 100%;
}

.cta-half {
  float: left;
  height: 100%;
  width: 50%;
}

.cta-block {
  display: table;
  height: 100%;
  width: 100%;
}

.cta-block-inner {
  display: table-cell;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

.cta-block p {
  line-height: 1.4125;
  margin: 0;
}

.cta-block p.white {
  color: #FFFFFF;
}

.cta-block p .btn {
  margin-top: 10px;
}

.cta-block .btn {
  background-color: #414142;
  border-radius: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 8px 12px;
  text-decoration: none;
}

.cta-block .btn:hover {
  background-color: #313132;
} 
 <div class="cta-half">
  <div class="cta-block" style="background-color:#FFFFFF;">
    <div class="cta-block-inner">
      <p class="black">Watch our Quick Start</p>
      <a class="btn" href="https://google.com">Quick Start</a> </div>
  </div>
</div>


<div class="cta-half">
  <div class="cta-block" style="background-color:#47b2ffff;">
    <div class="cta-block-inner">
      <p class="white">Start in the Cloud</p>
      <a class="btn" href="https://google.com">Cloud</a> </div>
  </div>
</div>

Ответ №1:

Вы можете использовать ::before ::after псевдоэлемент или элемент с пустым content и некоторым позиционированием. Вы можете установить width и height нового элемента и добавить некоторые border-radius , чтобы сделать его кругом. Не забудьте установить position: relative на .cta-half элементе, чтобы вы могли перемещать круг относительно этого.

Вы можете добавить следующее в свой фрагмент в jsfiddle, он должен работать:

 .cta-half {
  position: relative;
}

.cta-half:last-of-type::after {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #47b2ff;
  content: '';
  height: 50px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
}

Если вы хотите добавить логотип в круг, вы можете обновить свой content и добавить url() . Я бы, вероятно, взял svg-версию логотипа и закодировал ее с помощью этого инструмента. Он преобразует изображение и использует его следующим образом:

 content: url("data:image/svg xml,
");

Вы также можете добавить несколько padding , чтобы уменьшить размер логотипа.

Результат:

введите описание изображения здесь

Комментарии:

1. Я попробовал выше; Круг действительно отображается, но теперь два квадратных блока расположены горизонтально, а не вертикально.

2. Я определяю это: .cta-half { float: left; высота: 100%; ширина: 50%; позиция: относительная; } И это устранило проблему

3. Также моя последняя проблема связана с изображением. Мне трудно добавить изображение в круг. Я пытался: .cta-half:last-of-type::after { background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_"G"_Logo.svg/753px-Google_"G"_Logo.svg.png"); background-color: #fff; border-radius: 50%; border: 2px solid #47b2ff; content: ''; height: 50px; left: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 50px; } но изображение не отображается в зале.

4. Я только что обновил свой ответ подробностями о логотипе.