为啥这个 CSS 按钮不在 div 中居中？

Posted 2023-03-05

【中文标题】为啥这个 CSS 按钮不在 div 中居中？

【英文标题】：why won't this css button center inside div?为什么这个 CSS 按钮不在 div 中居中？

【发布时间】：2014-01-12 10:43:04

【问题描述】：

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

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

【问题讨论】：

旁注：在 IE9 中似乎比按钮更坏。

最简单的方法是将它包装在另一个 div 中，但你拥有的这段代码是 uhhh :) 我猜你是初学者，所以继续努力，你会变得更好:)

【参考方案1】：

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

【参考方案2】：

将按钮包裹在一个元素中并给它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.

【参考方案3】：

试试这个

<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

【参考方案4】：

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

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

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

【参考方案5】：

check fiddle here

你必须像下面这样修改你的CSS： - 从a.button-large 类中删除margin - 并在.button 类中更改display:table

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;

【参考方案6】：

你有问题是因为display:inline-block...see here

在css的这一部分，添加：

删除buttonclass 中的所有margin 设置并修改如下：

/*  --------------------------------------------------
    :: 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 demo

如何做居中的inline-block元素的唯一解决方案是使用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可以解决你的问题！

【讨论】：

我知道，当我添加宽度时，它会居中。关键是按钮没有宽度，只是使用填充来扩展它。如果我使用块，它将扩展到整个 div...这就是我使用 inline-block 的原因...但是 text-alight center 由于某种原因不起作用。

嘿，是的，它工作...不过我有一个小问题..jsfiddle.net/Qt9u3/6 我无法让按钮适合 div ..它总是像我的一样漂浮在 div 之外其他线程，但不是当我使用浮动时：离开它不会再居中了......

@op1001 ：在您的问题中发布了答案...height 缺少 document ！！

【参考方案7】：

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

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

http://jsfiddle.net/jqvbM/

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

【讨论】：

重点是不要使用宽度..所以按钮仅使用填充扩展..宽度会限制按钮大小...这就是为什么我使用 inline-block 因为块扩展它全宽与实际宽度设置到位..

【参考方案8】：

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

【参考方案9】：

我建议将其拨回一点，然后将自己与您的框架或您正在使用的任何东西分开。要水平居中，有两种方法。

您必须根据是否希望按钮定位：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…</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;