9

所以......这开始让我烦恼......我想我会来这里寻求帮助......

框周围的主 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/

4

9 回答 9

12

你有问题是因为display:inline-block......看这里

在这部分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;
}

编辑：使用内联块而不设置宽度

内联块演示

如何做中心内联块元素的唯一解决方案是使用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解决你的问题！

于 2013-12-24T07:32:52.240 回答
5

您的按钮必须是块级元素。最简单的修复：

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

http://jsfiddle.net/jqvbM/

我还将删除 10px 右边距a.button-large i以使“了解更多”文本居中。

于 2013-12-24T07:34:41.070 回答
1

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

如果您希望顶部 P 为 text-align:right; 请对按钮使用不同的 P

记住。如果你的元素是 display:block; 所以你需要给 margin: 0 auto; 到你的元素。如果你的元素是 display:inline-block; 你需要给 text-align:center; 到父元素。

于 2013-12-24T07:31:12.997 回答
1

在这里检查小提琴

你必须修改你的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;
}
于 2013-12-24T07:31:35.033 回答
1

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

于 2013-12-24T07:34:41.490 回答
1

我建议把它拨回来一点，让自己脱离你的框架或你正在使用的任何东西。要水平居中，有两种方法。

您必须根据是否希望按钮定位：inline、inline-block 或 block 来决定。对于移动设备和手指以及所有这些东西（2014 年） - 我建议使用 inline-block 或 block。所以 -

如果它是内联块，那么您可以将其视为文本。将父级设置为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…&lt;/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;
}
于 2013-12-24T08:10:24.390 回答
0

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

}
于 2013-12-24T07:29:12.340 回答
0

将按钮包装在一个元素中并给出它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;
}

在这里更新了小提琴。

于 2013-12-24T07:29:24.750 回答
0

试试这个

<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>

演示

于 2013-12-24T07:30:03.827 回答