Question

我想使用CSS将我的按钮文本放在中心。我尝试过使用 text-align 以及 vertical-align ，但没有任何效果。请指教。这是我的按钮css

.button_eclipse {
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
background: rgb(247,107,32) !important;
color: rgb(255,255,255) !important;
}

在这个模板中，我正在创建按钮

<div>
<a data-role="button" id="btn_gotohomepage" class="button_eclipse"><%= val_btn_gotohomepage %></a>
<a data-role="button" id="btn_gotologinpage" class="button_eclipse"><%= val_btn_gotologinpage %></a>
<a data-role="button" id="btn_gotolistpage" class="button_eclipse"><%= val_btn_gotolistpage %></a>
</div>

请帮帮我。提前谢谢。

Answer 1

工作示例：http://jsfiddle.net/HYjeG/4/

HTML：

<div>
    <a data-role="button" id="btn_gotohomepage" class="button_eclipse">Some text</a> 
</div>

CSS：

.button_eclipse { 宽度：100px！重要; 身高：100px！重要; border-radius：50％！important; 背景：rgb（247,107,32）！important; 颜色：rgb（255,255,255）！重要; }

.button_eclipse .ui-btn-inner {
    border-radius: 50% !important;
    height: 80% !important;
}

.button_eclipse .ui-btn-inner  .ui-btn-text { 
    display: block !important;
    margin: 28px 0 0 -17px;
    width: 95px !important;
    height: 20px !important;
    text-align: center !important;
}

Answer 2

而不是使用宽度和高度使用填充：

.button_eclipse {
    padding: 100px 100px !important;
    border-radius: 50% !important;
    background: rgb(247,107,32) !important;
    color: rgb(255,255,255) !important;
}

那应该有用

使用css将带有data-role =按钮的锚标记的文本放在中心

2 个答案: