Question

所以...这开始让我恼火......我想我会来这里得到一些帮助......

盒子周围的主要div有一个宽度...然后有文本......和我想要的按钮在div的中心..

它是<a href>按钮..但它不会居中。

我认为我不需要指定宽度，因为外部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/

Answer 1

由于display:inline-block ... see here

，您遇到了问题

在 css 的此部分中，添加：

删除margin课程中设置的所有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;
}

编辑：在不设置宽度的情况下使用内联块

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才能解决您的问题！

Answer 2

您的按钮必须是块级元素。最简单的解决方法：

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

http://jsfiddle.net/jqvbM/

我还会删除a.button-large i上的10px右边距，以便将“了解详情”文字居中。

Answer 3

你需要把text-align：center;在您的情况下，按钮的父元素是div.service-text。

如果你想要顶部P是文本对齐：对;请使用不同的P到按钮

记。如果您的元素是display：block;所以你需要给予保证金：0自动;你的元素。如果你的元素是显示：inline-block;你需要给text-align：center;到父元素。

Answer 4

check fiddle here

你必须像下面那样修改你的CSS： - 从margin课程中删除a.button-large - 并更改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;
}

Answer 5

快速方法是将"text-align: center;"添加到.service-text。

Answer 6

我建议稍微拨回来，与你的框架或你正在使用的任何东西离婚。为了水平居中，有两种方法。

您必须根据您是否希望按钮位置来决定：内联，内联块或块。对于移动和手指以及所有这些东西（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;
}

Answer 7

尝试将您的按钮包含在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;

}

Answer 8

将元素中的按钮包裹起来，并将其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;
}

Updated fiddle here.

Answer 9

试试这个

<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

为什么在div中赢得这个css按钮中心？

9 个答案:

HTML

CSS