相关疑难解决方法(0)

元素不会保持居中,特别是在重新调整屏幕大小时

我的问题是我不能水平居中三角形指针.

好吧,我可以将指针放在一些窗口大小的中心,但是当我收缩或扩展窗口时,它会再将它放在错误的位置.

我错过了什么?

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: 48%;
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container container-decor">great distance</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 css-shapes

9
推荐指数
1
解决办法
3028
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

html ×1