web-dev-qa-db-ja.com

なぜこのCSSボタンはdivの中央にないのですか？

だから...これは私を困らせ始めています...そして私はここに来て助けを得ると思った..

ボックスの周りのメインdivには幅があり、次にテキストがあり、divの中央にボタンがあります。

それは <a href> button ..しかし、中央にはありません。

外側のdivには幅があるため、幅を指定する必要はないと思いました。margin:0 auto; text-align:centerなど何も動作しません

<h2 class="service-style color_service">Annoyed</h2>
<div class="service-text text1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…
    </p>

    <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

ここにフィドルリンクがあります

http://jsfiddle.net/2gMQ9/

htmlcssbuttoncenteringflat
9
op1001

display:inline-block... こちらを参照してください のために問題があります

cssのこのセクションに、以下を追加します。

marginclassのすべてのbuttonのセットを削除し、以下のように修正します。

/*  --------------------------------------------------
    :: Button Configuration
    -------------------------------------------------- */
 .button {
    display:block; /* change this from inline-block */
    width:20%; /* setting the width */
    margin:0 auto; /* this will center  it */
    position:relative;
    font-style:normal;
    font-weight:normal;
    font-family:"Open Sans";
    font-size:14px;
    outline:none;
    color:#fff;
    border:none;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    background-color:#96aa39;
    border-bottom:1px solid #7b8b2f;
}

EDIT：幅を設定せずにインラインブロックを使用する

inline-block demo

方法インラインブロック要素を中央に配置する唯一の解決策は、text-align:centerを使用することです

あなたのCSSクラスで：

.service-text {
text-align: center; /* add this to center the button */
}

次に追加します：

.service-text p{
 text-align:left /* and then add this to left align the text inside the para*/
}

この方法では、widthを指定する必要はなく、paddingのみが問題を解決します。

12
NoobEditor

ボタンはブロックレベルの要素である必要があります。最も簡単な修正：

a.button-large{  
    padding : 15px 30px 14px 30px;
    margin  : 5px auto;
    display : block;
    width   : 100px;
}

http://jsfiddle.net/jqvbM/

また、a.button-large iの10pxの右マージンを削除して、「詳細」テキストを中央に配置します。

4
AlienWebguy

少しダイヤルして、フレームワークまたは使用しているものとは離婚することをお勧めします。物事を水平方向に中央揃えするには、2つのアプローチがあります。

ボタンを配置する位置（インライン、インラインブロック、ブロック）に基づいて決定する必要があります。モバイルと指などすべて（2014）-インラインブロックまたはブロックをお勧めします。そう -

インラインブロックの場合は、テキストのように扱うことができます。親をtext-align center;に設定します

ブロックの場合は、margin-right: auto; margin-left: auto;を使用できますが、これには他の問題があります。他のすべての人が近くで考えているように、それらがお互いに浮かんですべてを台無しにしないように、適切に整理する必要があります。次のようにすることをお勧めします。 jsfiddle

PS-私たちはあなたのフィドルにそれほど多くのコードを見る必要はありません。最低限の必需品だけで問題を解決するのは簡単です。幸運を。

HTML

<aside class="service">

    <header>
        <h2 class="">Title of module thing</h2>
    </header>

    <div class="text-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p>
        <a href="#" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
    </div> <!-- .text-wrapper -->

</aside> <!-- .service -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} /* start your projext off right */


.service {
    border: 1px solid #2ecc71;
    font-family: helvetica;
    text-align: center;
}

.service header {
    background-color: #2ecc71;  
}

.service header h2 {
    font-size: 1.3em;
    font-weight: 400;
    color: white;
    /* text-align: center; */ /* the parent should have this - not the element */
    /* width: 100%; */ /* this is already default because it is a block element */
    margin: 0;
    padding: .5em;
}

.service .text-wrapper {
    padding: 1em;
}

.service p {
    text-align: left;
    font-size: .9em;
}

.button {
    display: inline-block; /*so it's like... "inline" - and can be centered */
    background-color: #2ecc71;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 1em 2em;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
1
sheriffderek

Text-align：centerを配置する必要があります。あなたの場合のボタンの親要素はdiv.service-textです。

上部のPをtext-align：rightにしたい場合。ボタンに異なるPを使用してください

覚えて。要素がdisplay：blockの場合;したがって、マージンを与える必要があります：0 auto;あなたの要素に。要素がdisplay：inline-blockの場合; text-align：centerを指定する必要があります。親要素に。

1
g.e.manor

ここでフィドルをチェック

次のようにcssを変更する必要があります。-a.button-largeクラスからmarginを削除し、display:tableクラスの.buttonを変更します

a.button-large{  
    padding:15px 30px 14px 30px;    
}


.button{
display:table;
position:relative;
font-style:normal; 
font-weight:normal; 
font-family:"Open Sans"; 
font-size:14px;
margin:0 auto;
outline:none;
color:#fff;
border:none;
text-decoration:none;
text-align:center;
cursor:pointer;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
1
Sandip

簡単な方法は、"text-align: center;"を.service-textに追加することです。

1
Jimmy.Peng

これを試して

<div style="text-align:center;">
    <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

[〜＃〜] demo [〜＃〜]

0
Sridhar R

Divにボタンを含めて、以下のようにCSSを更新してください

<div class="check">
     <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
 </div>

`CSS`
.check
{
    width: 150px;
    margin:auto;

}
0
Kishori

ボタンを要素でラップし、text-align:center。

書く：

<div class="center">
        <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

.center {
    text-align:center;
}

ここでフィドルを更新しました。

0
Hiral