如何在此范围内使文本垂直居中

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.

Answer 1

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> 

Answer 2

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> 

Answer 3

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

Answer 4

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

Answer 5

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> 

Answer 6

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

Answer 7

Please try following code

CSS

 .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-table;
      height: 100%;
      width: 100%;
      /*Padding:51px 0px 0px 7px;*/
      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;
    }

HTML

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

This may work in firefox.