How to align text inside the box?

Question

I created a text and made a boundary around it. Later, I specified the dimensions of the box according to my needs. When I increased the size of the text, it extended outside the box. I even wrote 'text-align:center;' in it's CSS part. Still it is not giving any result.

I've tried 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>

I expect the name BITSHack to be inside the boundry, but it is extending it.

Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — kish, Dec 25 '18 at 12:14

B N Manish · Answer 1 · 2018-12-25T12:36:31.130

1

Don't use height: 130px; inside name class.Try this code:

.name{
   height: auto;
}

edited Dec 25 '18 at 12:36

answered Dec 25 '18 at 12:29

B N Manish

116
1
9

StackUser · Answer 2 · 2019-03-05T10:58:37.580

    .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>

now try to execute it,your expected result will come.

score 0 · Accepted Answer · answered Dec 25 '18 at 12:43

Don't use height at all, the default is set to auto. Also don't use f and g tags, use span. Yuo can wrap both spans with a div and then align the div to the center if you'll the give the container (.name in your case)

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>

How to align text inside the box?

3 Answers3