Question

如何将文本放在行内某列内的按钮下方？我想将<div class="container"> <div class="row"> <div class="col-md-9 vcenter"> <h2>Talk to us about your <span class="u">next</span> building project. </h2> </div> <div class="col-md-3"> <button class="btn btn-quote">Get A Free Quote</button> <small>We will contact you within 24 hours.</small> </div> </div> </div>标记内的文字准确对齐在按钮下方的中心位置：

HTML：

user_id

Current Result

What I want

Answer 1

small {
   display: block; 
   text-align: center; 
}

这将变为阻止并使内部文本居中。

很抱歉为了简洁，我在移动设备上。

Answer 2

按钮位于中间位置？如果是这样，您只需将Text-align: center提供给<small> div。

你能说出你想要的行为吗？

修改：即使如此，文字也不在中心，您可能需要添加其中一项或两项：display: block和/或width: 100%至<small>

Answer 3

问题是该按钮与列的相关性如何？它居中吗？是全宽吗？

如果其中一个答案是肯定的，你可以选择：

small {
   display: block; 
   text-align: center; 
}

如果没有，则需要将按钮和小号包装在另一个容器中。

http://codepen.io/Type-Style/pen/dXOyGW

Answer 4

一种方法是

small{
    width: 100%;
    text-align: center;
    display: inline-block;
}

按钮下方的中心文字

4 个答案: