Center the content inside shape HTML

Question

This what I get [1]: https://i.stack.imgur.com/TGQiR.png

I want it like this [2]: https://i.stack.imgur.com/Mu7g5.png

Here is my code, this is the CSS file.

.shape{
  width:200px;
  height:250px;
  color:#4F5E73;
  margin:20px auto;
  background-color:rgb(236, 236, 236);
  text-align:center;
}

This is how I show the shape and text.

<div class="shape">
  <span style="font-size:72px;"> 7 </span> <br />
  <span style="font-size:18px;"> minutes to Applecross High School </span> <br />
</div>

Do you want to align it vertical? – Sergej Jul 20 '16 at 07:39 — Sergej, Jul 20 '16 at 07:39

score 2 · Accepted Answer · edited Jul 20 '16 at 08:06

2

Try this, add padding to .shape and to align everything in center and within our assigned height and width, so for that we have included box-sizing:border-box; this tells browser to include padding within element's height and width (i.e. overe-here is .shape).

.shape {
  width:210px;
  height:250px;
  color:#4F5E73;
  background-color:rgb(236, 236, 236);
  text-align:center;
  padding:50px;
  box-sizing:border-box;
}

<div class="shape">
  <span style="font-size:72px;"> 7 </span>
  <span style="font-size:18px;"> minutes</span><br>
  <span>to Applecross High</span> 
  <span>School </span> 
</div>

edited Jul 20 '16 at 08:06

Sergej

1,082
11
27

answered Jul 20 '16 at 07:50

frnt

8,455
2
22
25

thank ! that really help, its work. – Jalon Juanis Jul 20 '16 at 09:41
Welcome @JalonJuanis :-) – frnt Jul 20 '16 at 10:36
@JalonJuanis Do accept the answer if above code helped you. – frnt Jul 26 '16 at 11:36

score 0 · Answer 2 · answered Jul 20 '16 at 07:39

0

You can use flex for modern browsers. css:

  .shape{
      display:flex;
      align-items: center;
      width:200px;
      height:250px;
      color:#4F5E73;
      margin:20px auto;
      background-color:rgb(236, 236, 236);
      text-align:center;
  }

you should use some fallbacks for -webkit- and so on

answered Jul 20 '16 at 07:39

Simon Kraus

736
4
14

thank you, its work but the content has mixed, how can i separate it two line? I want the number as a heading. – Jalon Juanis Jul 20 '16 at 07:44
just add the following to your css: `.shape span { display: block; }` – Simon Kraus Jul 20 '16 at 07:58

score 0 · Answer 3 · edited Jul 20 '16 at 07:49

HTML:

<div class="shape">
  <div class="vert-align">
    <span style="font-size:72px;"> 7 </span> <br />
    <span style="font-size:18px;"> minutes to Applecross High School </span> <br />
  </div>
</div>

CSS:

.shape {
  width: 200px;
  height: 250px;
  color: #4F5E73;
  margin: 20px auto;
  background-color: rgb(236, 236, 236);
  text-align: center;
}
.shape .vert-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

score 0 · Answer 4 · answered Jul 20 '16 at 07:45

If you want a solution which is supported across browsers do sth like this:

HTML

<div class="shape">
  <div class="shape__inner">
    <span style="font-size:72px;">7</span>
    <span style="font-size:18px;">minutes to Applecross High School</span>
  </div>
</div>

CSS

.shape {
    width:200px;
    height:250px;
    color:#4F5E73;
    margin:20px auto;
    background-color:rgb(236, 236, 236);
    text-align:center;
}

.shape__inner {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Check a working example here

score 0 · Answer 5 · answered Jul 20 '16 at 07:49

This jsFiddle can be a possible solution for your problem.

 .shape {
   width: 200px;
   height: 250px;
   color: #4F5E73;
   margin: 20px auto;
   background-color: rgb(236, 236, 236);
   text-align: center;
 }
 
 span {
   position: relative;
   top: 20%;
 }

<div class="shape">
  <span style="font-size:72px;"> 7 </span>
  <br />
  <span style="font-size:18px;"> minutes to Applecross High School </span>
  <br />
</div>

score 0 · Answer 6 · answered Jul 20 '16 at 09:46

It's work, this is the answer.

.shape {
  width:210px;
  height:250px;
  color:#4F5E73;
  background-color:rgb(236, 236, 236);
  text-align:center;
  padding:50px;
  box-sizing:border-box;
}

<div class="shape">
  <span style="font-size:72px;"> 7 </span>
  <span style="font-size:18px;"> minutes</span><br>
  <span>to Applecross High</span> 
  <span>School </span> 
</div>

Center the content inside shape HTML

6 Answers6