html - 使用 float 将按钮垂直对齐到文本

Question

我试图将注册按钮与 Wordpress 中文本 block 的垂直中间对齐。这是我的 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;
}

这是我的 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>

这是一个可以看到错位的屏幕截图。我还需要在移动 View 中将按钮堆叠在日期下方。请帮忙!非常感谢!

enter image description here

Answer 1

您可以尝试按照以下方式添加一些 CSS:

.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 */
}

您可以将其包装在诸如 @media (min-width: 960px) 之类的媒体查询中，以仅在桌面设备上应用这些规则。

对于其他设备，您可以添加以下规则以获得其他文本下方的按钮(如果您将上述代码包装在媒体查询中，则此处不需要媒体查询):

.location .event_register {
    clear: left;
}

对于您的按钮样式，您可能希望删除 display: inline; 以使我上面的样式正常工作。