HTML - Вставить текст внутри контейнера div - PullRequest
Новая
       0

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

0 голосов
/ 25 июня 2018

Я использую 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>

1 Ответ

0 голосов
/ 25 июня 2018

Просто используйте тег 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...