时间戳

首页 > 解决方案 > 如何对齐框内的文本？

css - 如何对齐框内的文本？

问题描述

我创建了一个文本并围绕它做了一个边界。后来，我根据自己的需要指定了盒子的尺寸。当我增加文本的大小时，它会延伸到框外。我什至写了'text-align：center;' 在它的 CSS 部分。它仍然没有给出任何结果。

我试过了text-align:center; 

.cards {
  display: grid;
  grid-template-row: 1fr 2fr 1fr;
  margin-right: 50px;
  margin-left: 50px;
  grid-row-gap: 20px;
}

.main {
  grid-row: 2/3;
  display: grid;
  grid-template-row: 1fr 1fr;
  grid-row-gap: 50px;
  margin-top: 80px;
}

.upper {
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 150px;
  grid-column-gap: 10px;
}

.name {
  color: white;
  border: solid 10px #00CED1;
  border-radius: 15px;
  font-size: 50px;
  height: 130px;
  padding: 5px;
  margin-left: 100px;
  grid-column: 1/3;
  text-align: center;
}
<div class="cards">
  <div class="main">
    <div class="upper">
      <div class="name">
        <h1>
          <f style="font-family:'Abril Fatface'">BITS</f>
          <g style="font-family:'Antic Didone'">Hack</g>
        </h1>
      </div>
      <div class="year">
        <h1 style="font-family:'Asap Condensed'">2019</h1>
      </div>
    </div>
  </div>
</div>

我希望 BITSHack 这个名字在边界之内，但它正在扩展它。

标签： csshtml

解决方案

不要使用高度：130px；内部名称类。试试这个代码：

.name{
   height: auto;
}

推荐阅读