0

我想使用 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>

请帮我。提前致谢。

4

2 回答 2

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 !important; 高度：100px！重要；边界半径：50%！重要；背景：RGB（247,107,32）！重要；颜色：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;
}
于 2013-07-11T09:02:56.417 回答
0

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

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

那应该工作

于 2013-07-11T09:03:14.353 回答