Column data not getting vertically aligned in the middle

[ajoy123rocks]

      <div id="Curriculum" class="tabcontentref">
        <table  style="margin-left: 2%;width:50%">
          <tr>
            <td><p class="Docs"><b>INTRODUCTION TO LEVEL 1</b>&emsp;(Version 2.0, 2021)</td>
            <td><a href="https://drive.google.com/file/d/1FGL-JeWTK-y_mzmA_FdAYwdy-0D8xleA/view?usp=sharing" download target="_blank"class = "buttonvid">  <i class="fa fa-download"></i>&nbsp;Download</a></p></td>
          </tr>
          <tr>
            <td><p class="Docs"><b>REFEREE COURSE - LEVEL 1</b>&emsp;(Version 2.0, 2021)</td>
            <td><a href="https://drive.google.com/file/d/1ZcO_DmDrlFYxONgdpy8UEECfAr1I14RB/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td>
          </tr> 
          <tr>  
            <td><p class="Docs"><b>REFEREE COURSE - LEVEL 2</b>&emsp;(Version 2.0, 2021)</td>
            <td><a href="https://drive.google.com/file/d/1umYT1Vl6OjrixccNNOqFi9yoaXtY8k6b/view?usp=sharing" download target="_blank"class = "buttonvid">  <i class="fa fa-download"></i>&nbsp;Download</a></p></td>
          </tr> 
          <tr> 
            <td><p class="Docs"><b>REFEREE COURSE - LEVEL 3</b>&emsp;(Version 2.0, 2021)</td>                   
            <td><a href="https://drive.google.com/file/d/12-MxZwscvjYSS29czMNp3kH-rgrf5pWC/view?usp=sharing" download target="_blank"class = "buttonvid">  <i class="fa fa-download"></i>&nbsp;Download</a></p></td>
          </tr>     
                
        </table>

td,tr {
  border-style: none;
    text-align: left;
  }

.buttonvid{
  padding: 2px 10px;
  border-color: white;
  font-size:12px;
  font-family: tahoma;
  font-weight: bold;

}

.buttonvid{
  border: 2px solid var(--primary-color); ;
  color: black;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  background: var(--primary-color); ;
  font-weight: bold;
}
.buttonvid:hover,.buttonvid:focus{ 
  background: transparent;
  text-decoration: none;
  color: white;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  
  }

The 2nd column data is not getting aligned vertically in the middle. Seems like it is vertically aligned in the top. I tried giving "vertical-align:middle" in the CSS file, but still did not get it aligned.

[Ingolme]

Setting vertical-align:middle on the <td> element should do it.

[ajoy123rocks]

          <tr>
            <td><p class="Docs"><b>INTRODUCTION TO LEVEL 1</b>&emsp;(Version 2.0, 2021)</td>
            <td vertical-align:middle><a href="https://drive.google.com/file/d/1FGL-JeWTK-y_mzmA_FdAYwdy-0D8xleA/view?usp=sharing" download target="_blank"class = "buttonvid">  <i class="fa fa-download"></i>&nbsp;Download</a></p></td>
          </tr>

Tried it.. did not work.

[ajoy123rocks]

Found the culprit.. Class = "Docs".. removed the margins and it worked fine.

.Docs{
  font-size: large;
  color: var(--primary-color); 
  margin: 10px ;
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
}

 

[ajoy123rocks]

The problem still persists.

Actually the real problem was something else... all the rows were not getting vertically aligned in the middle. I found this when i changed the border to dotted.

td,tr {
  border-style: dotted;
    text-align: left;
  }
.Docs{
  font-size: large;
  color: var(--primary-color);
}

 

[dsonesuk]

Each paragraph tag must have an equal closing tag in the same cell, you have paragraph crossing two cells. Your browser probably tries to correct this by adding opening/closing tags which results in a empty paragraph. So vertical-align: might be working, but! Its aligning a paragraph with text and without, so it looks as though its not. Inline styles use style attribute style="vertical-align: middle;".

For vertical-align to work, the paragraph margin/padding top and bottom have to be equal and inline-height may need adjusting.

Try adding background-color to paragraph to observe this.

Edited March 2, 2022 by dsonesuk

[ajoy123rocks]

Yes.. The paragraph tag was the root cause. Changed the top and bottom margins and got it to work. Thanks