Question

我正在运行以下代码： https://jsfiddle.net/5uoz3mqz/1/

.triangle {
  text-align: center;
  width: 100%;
  height: 0px;
  border-style: inset;
  border-width: 0 300px 300px 0;
  border-color: transparent #f08326 transparent transparent;
  position: absolute;
}

.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
}

<div class="triangle">
  <div class="page-title">White Labs</div>
  <p>Some text here to make dasssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

如何将标题框以及带有三角形的div顶部的文本居中？我只是留在一边的三角形，顶部有中心的标题框，然后是居中的文字。

谢谢，

Answer 1

只需在margin: 0pc auto;中使用.page-title 更新小提琴演示click here

.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
  margin:0px auto;
}

或者更好地提供pseudo元素而不是tringle border，
更新的代码如下：

.triangle {
    text-align: center;
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
}
.triangle:before {
  content:'';
  position:absolute;
  right:-423px;
  top:-300px;
  background:rgba(240,131,38,0.50);
  width:600px;
  height:600px;
  transform: rotate(45deg);
  z-index:0;
}
.page-title {
  position: relative;
  text-align: center;
  font-family: "bebas";
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  padding: 5px;
  background-color: rgba(15, 138, 199, 0.87);
  border: 0.1em solid rgba(4, 79, 102, 0.22);
  width: 130px;
  margin:0px auto;
}
.triangle p {
  position: relative;
}

用于小提琴链接click here

Answer 2

简单地添加＆＃34;保证金：0自动;＆＃34;属性为.page-title in css。

它将重置所有边距并将其设置为自动居中。

Answer 3

宽度为0的主div容器将是一个问题，因为子容器需要一些宽度才能定位/浮动到中心。我也改变了div结构，请在https://jsfiddle.net/u1Lsux7n/1/找到解决方案。还有长篇文章＆＃39; dssssss .......＆＃39;在你的例子中，你将不得不添加溢出＆＃39; css使这样的textx中心对齐。

您还可以使用宽度为90％的主三角形容器启动，然后相应地为子容器提供宽度。

.triangle { 
    text-align: center; 
    width: 0px; 
    height: 0px; 
    border-style: inset; 
    border-width: 0 300px 300px 0; 
    border-color: transparent #f08326 transparent transparent; 
    position: absolute; 
}

.page-title {
    position: relative;
    text-align: center; 
    font-family: "bebas"; 
    font-size: 30px; 
    color: #fff; text-transform: uppercase; 
    padding: 5px; background-color: rgba(15, 138, 199, 0.87); 
    border: 0.1em solid rgba(4, 79, 102, 0.22); 
    width: 130px; 
    margin:0 auto;

 }

 .triangle-container {
      width: 300px;
      height: 300px;
      float: left;
 }

 .page-contents {
      float: left;
 }


<div class="triangle">  
    <div class="triangle-container"> 
        <div class="page-title">Tile</div>
        <div class="page-contents">
            <p>Some text here to make dasssssssssssssssssssss ssssssssssssssssssssssssssssssssss</p>
        </div>          
    </div>
</div>

中心div与文本

3 个答案: