如何在此跨度内垂直居中显示文本

时间：2015-09-09 09:20:12

标签： html 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-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>

跨度的推理是整个橙色块是可点击的链接。问题是我希望“更多信息”文本始终在块中居中。我不想给它特定的像素属性，因为我希望它在调整大小时拉伸或变大。唯一的限制是最大宽度为1300px。

我已经尝试过垂直对齐，或添加基于百分比的填充，但没有效果。你可能会说，我对这方面的经验并不是很有经验，所以如果你在代码或其他解决方案中看到其他值得指出的东西，请做。

7 个答案:

答案 0 :(得分：3)

您可以将display: flex与align-items: center一起使用：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

文字很长的第二个例子：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

只需添加您的a标记，而不是您的div： （这是一个跨浏览器的解决方案。它适用于firefox，chrome和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>

答案 2 :(得分：0)

我认为这可能会解决您的问题..

您只需在display:inline-block

中将display:table-cell更改为.more_info_btn

并使div成为a代码，以便整个框格为link

答案 3 :(得分：0)

Ammit Singh是正确的

如果你给你一类阻止

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

然后在css中创建.block类

.block{display:block;}

问题解决了

答案 4 :(得分：-1)

您需要从.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>

答案 5 :(得分：-1)

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

答案 6 :(得分：-1)

请尝试以下代码

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

这可能适用于Firefox。

相关问题
最新问题