Html 为什么这个 css 按钮不会在 div 内居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20756662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why won't this css button center inside div?
提问by op1001
So... this is starting to annoy me ... and I thought i would come here and get some help..
所以......这开始让我烦恼......我想我会来这里寻求帮助......
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..
框周围的主 div 有一个宽度...然后有文本...和一个按钮，我想要在 div 的中心..
it is a <a href>button.. but it wont center.
它是一个<a href>按钮......但它不会居中。
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:centeretc nothing works
我不认为我需要指定宽度，因为外部 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>
here is the fiddle link
这是小提琴链接
回答by NoobEditor
You have the problem because of the display:inline-block...see here
你有问题是因为display:inline-block......见这里
In this section of css,add:
在css 的这一部分，添加：
Remove all the margin's set at buttonclass and amend as below:
删除class 中的所有margin's setbutton并修改如下：
/* --------------------------------------------------
:: 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 : to use inline-block without setting a width
编辑：在不设置宽度的情况下使用内联块
How to doonly solution to center inline-block element is to use text-align:center
如何解决居中内联块元素的唯一方法是使用text-align:center
in your css class:
在你的 css 类中：
.service-text {
text-align: center; /* add this to center the button */
}
and then add:
然后添加：
.service-text p{
text-align:left /* and then add this to left align the text inside the para*/
}
this way you wont need to give widthand only paddingwould solve your problem!
这样你就不需要付出width，只会padding解决你的问题！
回答by AlienWebguy
Your button needs to be a block level element. Simplest fix:
您的按钮必须是块级元素。最简单的修复：
a.button-large{
padding : 15px 30px 14px 30px;
margin : 5px auto;
display : block;
width : 100px;
}
I would also delete the 10px right margin on a.button-large ito center the "Learn More" text.
我还将删除 10px 右边距a.button-large i以将“了解更多”文本居中。
回答by Jimmy.Peng
Quick way is to add "text-align: center;"to .service-text.
快速的方法是添加"text-align: center;"到.service-text.
回答by sheriffderek
I would suggest dialing it back a little and divorce yourself from your framework or whatever you are using. To center things horizontally there are 2 approaches.
我建议将其拨回一点，并将自己与您的框架或您正在使用的任何东西分开。将事物水平居中有两种方法。
You have to decide based on whether you want the button to be position: inline, inline-block, or block. For mobile and fingers and all that stuff(2014) - I would suggest inline-block or block. So -
您必须根据是否希望按钮处于位置来决定：内联、内联块或块。对于移动设备和手指以及所有这些东西（2014 年）-我建议使用 inline-block 或 block。所以 -
if it's inline block, then you can just treat it like text. Set the parent to text-align center;
如果它是内联块，那么您可以将其视为文本。将父项设置为text-align center;
If it's block, then you you can use margin-right: auto; margin-left: auto;but that has other issues. Like all the other thinks near it need to be organized properly so that they don't float all over each other and screw everything up. I would suggest you do it like this: jsfiddle
如果它是块，那么您可以使用，margin-right: auto; margin-left: auto;但还有其他问题。就像所有其他人认为靠近它的人一样，需要适当地组织起来，这样它们就不会相互漂浮而把一切都搞砸了。我建议你这样做：jsfiddle
PS - we don't need to see so much code in your fiddle. It's easier to get to the rout of the problem with only the bare necessities. Good luck.
PS - 我们不需要在你的小提琴中看到这么多代码。仅使用基本的必需品更容易解决问题。祝你好运。
HTML
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
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;
}
回答by g.e.manor
You need to put the text-align:center; to the parent element of the button in your case is the div.service-text.
你需要把 text-align:center; 在您的情况下，按钮的父元素是 div.service-text。
if you want the top P to be text-align:right; please use diffrent P to the button
如果您希望顶部 P 为 text-align:right; 请对按钮使用不同的 P
remember. if your element is display:block; so you need to give margin: 0 auto; to your element. if your element is display:inline-block; you need to give text-align:center; to the parent element.
记住。如果你的元素是 display:block; 所以你需要给 margin: 0 auto; 到你的元素。如果你的元素是 display:inline-block; 你需要给 text-align:center; 到父元素。
回答by Sandip
you have to modify your css like below:
- remove marginfrom a.button-largeclass
- and change display:tablein .buttonclass
你必须像下面这样修改你的 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;
}
回答by Kishori
Try to include your button in a div and update CSSas given below
尝试将您的按钮包含在 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;
}
回答by Hiral
Wrap the button in an element and give it text-align:center.
将按钮包裹在一个元素中并给它text-align:center。
Write:
写：
<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;
}
