0

おしゃれなボタンを作ってみました。

JSフィドル

<div class="button" data-button='closed'>
    <div class="button-default">
        <span class="button-text">Click</span> 
    </div>
    <div class="button-overflow">
        <span class="button-overflow-text">Confirm!</span> 
    </div> 
</div>

デフォルトでは「クリック」と表示され、クリックすると「確認」に切り替わります。

問題は、「クリック」と「確認」の仕方がわからないことです。常に中心であること。そこにどんなテキストを入れても、それが欲しいので、それでも中央に配置されます。

4

5 に答える 5

4

追加するだけ

text-align: center;

に.button。

分岐したフィドル -> http://jsfiddle.net/Wd5vP/

于 2013-10-30T15:42:47.240 に答える
0

この変更されたCSSは私のために働いた：

.button {
    border: 1px solid black;
    background: #EEE;
    width: 100px;
    height: 28px;
    overflow:hidden;
    cursor: pointer;
    text-align:center;

}

.button-default{text-align:Center;}
body {

    font-family:Arial;
}


.button-text {
    position:absolute;
    left:40px;
}
.button-overflow {
    width:100%;
    position:relative;
    display:table-cell; 
    background:green;
    width: 100px;
    text-align:center;
    height: 28px;
    right: -100px;
}
.button-overflow-text{
    text-align:Center;

}
于 2013-10-30T16:42:51.473 に答える
0

text-align: center;CSS クラスに追加する.button

これは次のようになります。

.button {
  border: 1px solid black;
  background: #EEE;
  width: 100px;
  height: 28px;
  overflow:hidden;
  cursor: pointer;
  text-align: center;
  line-height: 28px;

}

また、css クラスを更新して削除する必要.button-overflow-textがdisplay: inlineありtext-align: leftますvertical-align:middle。

.button-overflow-text{
  display: inline;

}

于 2013-10-30T15:40:21.933 に答える
0

text-align:center を .button-overflow に追加するだけです

.button-overflow {
    width:100%;
    position:relative;
    display:table-cell; 
    background:green;
    width: 100px;
    height: 28px;
    right: -100px;
    text-align:center;
}
于 2013-10-30T15:41:31.927 に答える
0

次のように、CSS を少し単純化できます。

.button {
    border: 1px solid black;
    background: #EEE;
    width: 100px;
    height: 28px;
    overflow:hidden;
    cursor: pointer;
}
body {

    font-family:Arial;
}


.button-text {
    position:absolute;
    left:40px;
}
.button-overflow {
    width:100%;
    position:relative;
    background:green;
    width: 100px;
    height: 28px;
    right: -100px;
}

.button-default, .button-overflow {
    text-align: center;
}
于 2013-10-30T15:39:32.680 に答える