Question

我正在尝试将注册按钮与Wordpress中文本块的垂直中间对齐。这是我的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>

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

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;才能正常工作。

使用float将按钮垂直对齐

1 个答案: