为什么不里面的div这个CSS按钮中心？ [英] why won't this css button center inside div?

问题描述

所以......这是开始烦扰我...我想我会来到这里，得到一些帮助。

So... this is starting to annoy me ... and I thought i would come here and get some help..

环绕箱的主要DIV的宽度......然后是文字...和一个按钮，我想在div的中心。

The main div around the box has a width... then there is text... and a button that i want in the center of the div..

这是一个＆LT; A HREF方式＆gt; 按钮..但它不会中心

it is a <a href> button.. but it wont center.

我不认为我会需要指定的宽度，因为外面的div的宽度..我试过保证金：0汽车;文本对齐：中心等没有什么作品

I didn't think I would need to specify a width since the outside div has a width.. i tried margin:0 auto; text-align:center etc nothing works

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

这里是小提琴链接

here is the fiddle link

http://jsfiddle.net/2gMQ9/

推荐答案

您有因为显示的问题：inline-block的 ... see这里

You have the problem because of the display:inline-block...see here

在本节的 CSS ，地址：

在按钮类中删除所有的保证金的集合和如下修改：

Remove all the margin's set at buttonclass and amend as below:

/*  --------------------------------------------------
    :: 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的没有设置宽度

inline-block的演示

如何做唯一的解决方案，以集中inline-block的元素是使用文本对齐：中心

How to do only solution to center inline-block element is to use 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*/
}

这种方式，你不会需要给宽度只有填充将解决您的问题！

这篇关于为什么不里面的div这个CSS按钮中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！