How to vertical align an element that is suppose to be on the right hand side of the content?

Question

I am having an issue trying to align the 'X' button correctly next to the sentence. I am using float:right and I think that is the issue but basically the banner looks like this.

How do I vertically align the 'x' correctly?

 <p class="banner-content">
Don't miss out on our special offers during COVID-19. Including <s>£69</s> £40 to take the Foundation Level IT Professional Certification. 
  <span class="close-banner" 
  style="color:black; 
 font-size:1.5em;">&times;</span>
</p>

.close-banner {
    float:right;
    display:inline-block;
    vertical-align: middle;
    color: black;
}

.banner-content{
    padding: 1em;
    padding-bottom:0;
    font-size: large;
    color: black;
    font-weight: bold;
    text-align: center;
    width:100%;
}

Answer 1

You can give the container position: relative; and give position: absolute; to the x, and use top and transform to position it to the middle.

<p class="banner-content">
  Some text here 
  <span class="close-banner">&times;</span>
</p>

.banner-content {
  position: relative;
  text-align: center;
  width: 100%;
}
.close-banner {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

Explanation:

Because the parent is set to position relative; and the child is position absolute;, the child uses its parent as a guide. top: 50%; sets the top of the child at the vertical middle of the parent, and transform: translateY(-50%); moves half of the height of the child up to position it at the exact centre. Here's a picture from victorw999 that illustrates this: