HTML - вставить текст в контейнер div

Я использую div, потому что хочу раскрасить не всю границу, а внешний угол, он работает, но теперь я хочу добавить текст / ссылку в центре четырех углов.

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

Есть ли лучший способ сделать это?

Это кажется простым, но я был в наличии с этим уже несколько дней, это мой код во фрагменте:

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

<body >
  <header>
    <div class = "wholeDivDom">
      <div class = "outer">
        <div class = "inner">
        </div>
      </div>
    </div>
  </header>
</body>

Вы имеете в виду, что вроде "привет" есть текст с каждой стороны?

— 25.06.2018 13:04

html css text

25.06.2018 12:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

7 450

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто используйте тег span, чтобы добавить свой текст и примените к нему position: absolute. Затем предоставление ему left:50% и top:50% с transform: translate(-50%,-50%); должно помочь.

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "Hello";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

span {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

<body >
  <header>
    <div class = "wholeDivDom">
      <div class = "outer">
        <div class = "inner">
            <span>Text goes here</span>
        </div>
      </div>
    </div>
  </header>
</body>

25.06.2018 13:07

Другие вопросы по теме

Как получить прокручиваемый div во всю высоту в гибком блоке?

Rails создает динамический модальный шаблон

Пользовательские шрифты на мобильных устройствах работают на одних страницах, а на других - нет

Предупреждения и ошибки сетки CSS в netbeans 8.2

Как скрыть div / element при прокрутке передайте его?

Css: before: выровнять несколько строк текста с изображением

Как добавить автоматическую прокрутку при переполнении, если родительский элемент имеет фиксированную позицию

Макет с 3 столбцами разного размера с помощью Flex

Несколько тегов span под div добавляют лишние пробелы

Отображение определенных div в зависимости от того, какой переключатель установлен в JavaScript HTML и CSS

HTML - вставить текст в контейнер div

Ответы 1

Другие вопросы по теме

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