align button to text vertically with float

问题:

I am trying to align the register button to the vertical middle of the text block in Wordpress. Here is my css:

img.classthumb {
  border: 1px solid #d0cccc;
  width: 80%;
}

#cldc {
  width: 55%;
  float: left;
}

#thumbimg {
  float: left;
}

.clearfix:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:" ";
  clear:both;
  height:0;
}

.clearfix {
  display:inline-block;
  clear:both;
}

* html .clearfix {height:1%;}
.clearfix{display:block;}

@media (max-width:400px) {
  #cldc {
    float: none;
    width: 95%;
    text-align: justify;
  }
  #thumbimg {
    float: none;
    width: 40%;
    margin-bottom: 20px;
  }
}


.class { 
  width:100%;
  padding-top: 15px;
}

p.name {
  font-family: IowanOldStyle-BlackItalic;
  font-size: 16px;
  color: #686663;
  padding-bottom: 5px;
  letter-spacing: 2px;
  line-height: 1;
}

p.dates {
  font-family: IowanOldStyle-BlackItalic;
  font-size: 18px;
  color: #686663;
  padding-bottom: 2px;
  letter-spacing: 2px;
}

p.description { 
  padding-bottom: 10px;
}

p.location {
}

.event_register {
  display: inline;
  float: right;
  background-color: #e89000;
  color: black;
  font-family:IowanOldStyle-Bold;
  letter-spacing: 1px;
}

Here is my HTML

<div class="class clearfix">
  <div id ="thumbimg"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/07/classthumb.jpg" alt="classthumb" width="123" height="208" class="alignnone size-full wp-image-82 classthumb" />
  </div>
  <div id="cldc">
    <p class= "name">CLASS NAME</p>
    <p class= "description">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
    <p class= "dates">Dates</p>
    <p class= "location">
      Aug 1 - 2, 9AM - 5PM 
      <em>Salt Lake City, UT</em><button class="event_register">Register</button></p>
    <p class= "location">
      Aug 12 - 13, 9AM - 5PM
      <em>Chicago, IL</em><button class="event_register">Register</button></p>
    <p class= "location">
      Aug 15 - 16, 9AM - 5PM
      <em>Austin, TX</em><button class="event_register">Register</button></p>
      Aug 18 - 19, 9AM - 5PM
      <em>Denver, CO</em><button class="event_register">Register</button></p>
  </div>
</div>

Here is a screen shot where misalignment can be seen. I also need the button to stack underneath the dates in mobile view. Please help! Thank you so much!

enter image description here

回答1:

You could try adding some CSS along these lines:

.location {
    position: relative;    /* Required for button positioning */
    padding-right: 100px;  /* Width of button, plus about 40 pixels to ensure text doesn't crash with button */
}

.location .event_register {
    position: absolute;    /* Required for positioning the button  */
    top: 50%;              /* Vertically align centre */
    right: 0;              /* Align right */
    margin-top: -10px;     /* Half the height of the button to centre correctly */
}

You could wrap that in a media query such as @media (min-width: 960px) to only apply these rules on desktop devices.

For other devices, you could add the following rules to get the button underneath the other text (if you wrapped the above code in a media query, you don't need a media query here):

.location .event_register {
    clear: left;
}

For your button styles, you would want to remove the display: inline; for my styles above to work correctly.