时间戳

首页 > 解决方案 > 右侧按钮下方的文字

html - 右侧按钮下方的文字

问题描述

我希望文本位于右侧按钮下方，如下所示：

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾| 
|            SOME BUTTON                |
|                                       |
|_______________________________________|

                      powered by Company

用不同的 div 等尝试了一切，但不能让它太有效。

.info_button{
border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #E50000;
    color: #fff;
    width: auto;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    /*margin-bottom: 20px;*/
    margin-top: 10px;   
    font-size: 17px;
    display: inline-block;
    font-weight:330;
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
{
    .info_button
    {
        line-height:1.2;
    }
}
<div style="text-align: center;"><a class="info_button" href="">Here is a button-text</a>
</div>
<div style="font-size: 10px; text-align: right; margin-bottom: 20px;">powered by companyname</div>

可能这真的很容易，我只是迷路了。

标签： htmlcss

解决方案

保持在同一个div上

.info_button {
  border: none;
  border-radius: 5px;
  background: #E50000;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 17px;
  display: inline-block;
  font-weight: 330;
}

.box {
  display:table; /* fit content */
  margin:auto; /* center div */
  text-align:right; /* push text to right */
}
<div class="box">
 <a class="info_button" href="">Here is a button-text</a>
 <div style="font-size: 10px; ">powered by companyname</div>
</div>

推荐阅读