对齐按钮浮法垂直文本 [英] align button to text vertically with float

问题描述

我试图调整注册按钮在Word preSS文本块的垂直中间。这里是我的CSS：

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;
}

下面是我的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!

在这里输入的形象描述

推荐答案

您可以尝试沿着这些线路增加了一些CSS：

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

您可以包装，在媒体查询，如 @media（最小宽度：960像素）。仅在桌面设备应用这些规则

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

对于其他设备，您可以添加以下规则，以获得其他文本下方的按钮（如果你包裹在一个媒体查询上述code，你不需要媒体查询这里）：

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.

这篇关于对齐按钮浮法垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！