how to center the download button

in Download Manager Free

Viewing 2 posts - 1 through 2 (of 2 total)
Dec 29, 2025 at 6:32 am
#210319
Member
HappyHelper
OP

Hi, I am using a link template and wanted to know how to vertically center the Download button so it is even on the top and bottom.

Here is a sample of the code i am currently using:

<div class=”well c2a1″>
<div class=”media”>

<div class=”media-body”>
<h3 class=”media-heading” style=”padding-top: 0px;border:0px;margin: 0 0 5px 0;font-size:12pt;”>[title] </br> <span style=”margin-left:0px;font-size:8pt;font-weight:300″> <i style=”margin: 2px 0 0 5px;opacity:0.5″ class=”fa-regular fa-calendar-plus”></i> Uploaded: [create_date] <i style=”margin: 2px 0 0 5px;opacity:0.5″ class=”fa-regular fa-calendar-check”></i> Updated: [update_date] </br> <i style=”margin: 2px 0 0 5px;opacity:0.5″ class=”fa-solid fa-code-commit”></i> [version] <i style=”margin: 2px 0 0 5px;opacity:0.5″ class=”fa-regular fa-folder”></i> [file_size] <i style=”margin: 2px 0 0 5px;opacity:0.5″ class=”fa-solid fa-cloud-arrow-down”></i> [download_count] </span></h3>
[excerpt_80]
</div>

<div class=”ml-3″ align=”right”>
[download_link]
</div>

</div>

</div>
<style>.well.c2a1 .btn.wpdm-download-link{ padding: 11px 30px;font-size: 11pt; } .well.c2a1 .media-body{ font-size: 11pt; }</style>

Jan 7, 2026 at 5:02 am
#210508
Moderator
Nayeem Riddhi
Staff

Hello HappyHelper,

Hope you are well. To vertically center the Download button, you need to make the .media container use flexbox with vertical centering. Here’s the updated code:

<div class="well c2a1">
  <div class="media">
    <div class="media-body">
      <h3 class="media-heading" style="padding-top: 0px;border:0px;margin: 0 0 5px 0;font-size:12pt;">__[title]__</br>
        <span style="margin-left:0px;font-size:8pt;font-weight:300">
          <i style="margin: 2px 0 0 5px;opacity:0.5" class="fa-regular fa-calendar-plus"></i> Uploaded: [create_date]
          <i style="margin: 2px 0 0 5px;opacity:0.5" class="fa-regular fa-calendar-check"></i> Updated: [update_date]</br>
          <i style="margin: 2px 0 0 5px;opacity:0.5" class="fa-solid fa-code-commit"></i> [version]
          <i style="margin: 2px 0 0 5px;opacity:0.5" class="fa-regular fa-folder"></i> [file_size]
          <i style="margin: 2px 0 0 5px;opacity:0.5" class="fa-solid fa-cloud-arrow-down"></i> [download_count]
        </span>
      </h3>
      [excerpt_80]
    </div>
    <div class="ml-3" align="right">
      [download_link]
    </div>
  </div>
</div>

<style>
.well.c2a1 .media {
  display: flex;
  align-items: center;
}
.well.c2a1 .btn.wpdm-download-link {
  padding: 11px 30px;
  font-size: 11pt;
}
.well.c2a1 .media-body {
  font-size: 11pt;
}
</style>

Please kindly check.

Thank you

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.