如何对齐框内的文字？

Question

我创建了一个文本并围绕它创建了一个边界。后来，我根据自己的需要指定了盒子的尺寸。当我增加文本的大小时，它扩展到框外。我甚至写了'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这个名字能够在边界内，但它正在扩展它。

Answer 1

根本不要使用height，默认设置为auto。也不要使用f和g标签，使用span。 Yuo可以用div包裹两个跨度然后将div与中心对齐如果你要给容器（在你的情况下为.name）

display: flex;
align-items: center;
justify-content: 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: green;
  border: solid 10px #00CED1;
  border-radius: 15px;
  font-size: 50px;
  padding: 5px;
  margin-left: 100px;
  grid-column: 1/3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="cards">
  <div class="main">
    <div class="upper">
      <div class="name">
        <div>
          <span style="font-family:'Abril Fatface'">BITS</span>
          <span style="font-family:'Antic Didone'">Hack</span>
        </div>
      </div>
      <div class="year">
        <h1 style="font-family:'Asap Condensed'">2019</h1>
      </div>
    </div>
  </div>
</div>

Answer 2

不要使用高度：130px;在name name中。试试这段代码：

.name{
   height: auto;
}

Answer 3

    .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;
        //height: auto;
	    grid-column-gap:10px;
    }
    .name
    {
	    color:black;
	    border: solid 10px #00CED1;
	    border-radius:15px;
	    font-size:30px;
        height:auto;
	    padding:5px;
	    margin-left:50px;
	    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>

现在尝试执行它，你的预期结果将来临。