Question

我假设它与我的定位有关（我还在苦苦挣扎，以了解哪种最适合特定元素）。我还希望括号在列限制内保持定位，以防用户打开更窄的窗口。

HTML

<div class="col-md-4 col-md-offset-4">
  <div class="space margin-10">
    <div class="brackets">
      <h1 class="bracket-l">{</h1>
      <h1 class="bracket-r">}</h1>
      <h2 class="subhead align-center text-up size-1" id="title">HCM</h2>
      <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p>
    </div>
  </div>
</div>

CSS

.space {
  text-align: center;
  position: relative;
}

.bracket-l {
  font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;
  text-align: left;
  position: absolute;
}

.bracket-r {
  font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;
  text-align: right;
}

Answer 1

您可以使用前/后元素尝试此代码：

＆＃13;

.content {
margin:0 auto;
padding:50px;
text-align:center;
position:relative;
}

.content:before {
position:absolute;
left:0;
top:0;
content:"{";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}
.content:after {
position:absolute;
right:0;
top:0;
content:"}";
font-family: 'proxima-nova', sans-serif;
  font-size: 15rem;
  font-weight: 300;

}

＆＃13;

<div class="content">
<h1>Some text</h1>
<h3>More text More text More text More text</h3>
</div>

＆＃13;

Answer 2

这里是小提琴：https://jsfiddle.net/ur7pyxof/2/

<div class="col-md-4 col-md-offset-4">
  <div class="space margin-10">
    <div class="brackets">
      <h1>
      <table>
      <tr>
        <td class="bracket-l">{</td>
        <td> <h2 class="subhead align-center text-up size-1" id="title">HCM</h2>
      <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p></td>
        <td class="bracket-l">}</td>
      </tr>
      </table>
      </h1>
    </div>
  </div>

如何定位＆＃34;小标题＆＃34;和＆＃34;描述＆＃34;括号内的文字？

2 个答案: