How to vertical-center text inside this span

Question

I have a piece of code for a website that I'm writing, that I can't figure out.

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width:1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
}
.more_info_btn {
  font-size: 20px;
  display: inline-block;
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
}
.more_info_btn:hover {
  background-color: #b96226;
}
.more_info_btn:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
      Nulla nec aliqu.</div>
  </div>
  <div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

The reasoning for the span is so that the whole orange block is a clickable link. The problem is that I want the "more info" text to be centered within the block at all times. I don't want to give it specific pixel properties as I want it to stretch or get bigger when resized. The only restriction is a max-width of 1300px.

I have already tried vertical align, or adding a percentage based padding, but none work. As you can probably tell, I am not very experienced in this and learning by day, so if you see other things worth pointing out in the code, or other solutions, please do.

For me the text is perfectly aligned to the center? vertical and horizontal? — Aaron, Sep 09 '15 at 09:24
Is aligned to the center, vertically and horizontally. What's the problem? — Marcos Pérez Gude, Sep 09 '15 at 09:25
@Aaron The "more info" part is definitely not aligned to the center, top-wise. I think vertically aligned is the name? I can make a screenshot if you want. — Gerardo, Sep 09 '15 at 09:27
Click on **Run code snippet** you will see it is vertically aligned? — Aaron, Sep 09 '15 at 09:28
possible duplicate of [How to vertically center a inside a div?](http://stackoverflow.com/questions/4357315/how-to-vertically-center-a-span-inside-a-div) — Mukul Kant, Sep 09 '15 at 09:30
In firefox runs ok. Chrome is making "puñetas" with his bugs. — Marcos Pérez Gude, Sep 09 '15 at 09:30
@Aaron, this is how I view it. http://i.imgur.com/fwnPWCB.png — Gerardo, Sep 09 '15 at 09:31
@Gerardo a cross-browser solution: http://stackoverflow.com/a/32475947/5035890 — Marcos Pérez Gude, Sep 09 '15 at 09:34
this question asker is violating the rule of downvoting so please suggest him about the downvoting rule of SO — Amit singh, Sep 09 '15 at 09:36
@Amitsingh I am not downvoting any answer. All of the downvotes are being given by other users. Also, I believe that I cannot downvote due to being a new account. Not sure if that is what you meant. — Gerardo, Sep 09 '15 at 09:38

Alex Char · Accepted Answer · 2015-09-09T09:43:44.897

You can use display: flex alongside with align-items: center:

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width: 1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
  display: inline-block;
  height: 100%;
  width: 100%;
  text-decoration: blink;
}
.more_info_btn {
  font-size: 20px;
  height: 100%;
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.more_info_btn:hover {
  background-color: #b96226;
}
.more_info_btn:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
      Nulla nec aliqu.</div>
  </div>
  <div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

Second example with very long text:

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width: 1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
  display: inline-block;
  height: 100%;
  width: 100%;
  text-decoration: blink;
}
.more_info_btn {
  font-size: 20px;
  height: 100%;
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.more_info_btn:hover {
  background-color: #b96226;
}
.more_info_btn:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis. Nulla nec aliqu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis. Nulla nec aliqu.</div>
  </div>
  <div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

Hello Alex, as you can see when you run it, that breaks the whole orange box being a link. Is there a way around it? Thank you for the time. — Gerardo, Sep 09 '15 at 09:26
at least for me, in the updated code, the box isn't a link still. Only the section that contains the text up to the sides of the box, but not above or under. — Gerardo, Sep 09 '15 at 09:30
I retract, didn't see how you did it. Unfortunately setting it at a fixed line heigth doesn't work, as there are different boxes like this, and when you expand/contract them, there are more lines of text, and the more info doesn't adjust to the new heigth of the box. — Gerardo, Sep 09 '15 at 09:37
Yes! I will be looking into what changes you did to analyze and learn from it. Thank you! On a side note, it seems that someone dedicated themselves to downvote every post of this question, making it look like it was myself. — Gerardo, Sep 09 '15 at 09:48
Glad that I helped you. No it can't be you because you need some reputation before you can down vote. — Alex Char, Sep 09 '15 at 09:52

Marcos Pérez Gude · Answer 2 · 2015-09-09T09:35:29.560

Just add your a tag instead your div: (This is a cross-browser solution. It works in firefox, chrome and IE)

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width:1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
}
.more_info_btn {
  font-size: 20px;
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
}
.more_info:hover {
  background-color: #b96226;
}
.more_info:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
      Nulla nec aliqu.</div>
  </div>
  <a class="more_info" href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

And take the height:100% off of `.more_info_btn` – Oli Beatson Sep 09 '15 at 09:33 — Oli Beatson, Sep 09 '15 at 09:33

Amit singh · Answer 3 · 2015-09-09T09:33:21.903

0

I think this might solve your problem..

You just have to change display:inline-block into display:table-cell in the .more_info_btn

and make div an a tag so that the whole box will be link

edited Sep 09 '15 at 09:33

answered Sep 09 '15 at 09:28

Amit singh

2,006
1
13
19

score 0 · Answer 4 · answered Sep 09 '15 at 09:36

0

Ammit Singh was correct

if you give your a class of block

 <div class="more_info"><a href="#" class="block"><span class="more_info_btn">More Info</span></a>

Then create the .block class in css

.block{display:block;}

problem is solved

answered Sep 09 '15 at 09:36

WEB PERSON

50
5

score -1 · Answer 5 · answered Sep 09 '15 at 09:31

You need to remove the display inline-block from the .more_info_btn :)

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width:1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
}
.more_info_btn {
  font-size: 20px;
 /* display: inline-block;*/
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
}
.more_info_btn:hover {
  background-color: #b96226;
}
.more_info_btn:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
      Nulla nec aliqu.</div>
  </div>
  <div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

lol, love the -1 with no comment? removing the display property does align it vertically? — Aaron, Sep 09 '15 at 09:34

score -1 · Answer 6 · answered Sep 09 '15 at 09:32

.program_category_description {
  background-color: #e0e0e0;
  margin-bottom: 20px;
  max-width:1300px;
}
.program_category_description .description {
  display: table-cell;
  padding: 2% 1% 2% 1%;
}
.program_category_description .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 2%;
  font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  width: 15%;
  background-color: #CE6D2B;
}
.program_category_description .more_info a {
  color: white !important;
  width: 100%;
  text-align: center;
  display: table;
}
.more_info_btn {
  font-size: 20px;
  display: table-call;
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: pointer;
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
}
.more_info_btn:hover {
  background-color: #b96226;
}
.more_info_btn:active {
  background-color: #ccc;
}

<div class="article_body_section program_category_description">
  <div class="description">
    <div class="title">Short Term Programs</div>
    <div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
      Nulla nec aliqu.</div>
  </div>
  <div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
  </div>

</div>

How to vertical-center text inside this span

6 Answers6