为什么保证金：汽车不起作用？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

Center <div> and Display on Same Line 3 answers

中心

和显示在同一行3的答案

I want to center my element but when I use

我想把我的元素集中在一起,但是当我使用时

margin-left: auto;
margin-right: auto;

it doesn't work!

它不起作用!

this is my html

这是我的HTML

<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>

and this is my css:

这是我的css:

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}
.tc {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    display: inline;
    border-style: solid;
    border-width:1px;
}

and you can see the result here.

你可以在这里看到结果。

Can anybody help me?

有谁能够帮助我?

8 个解决方案

#1

margin-left: auto;
margin-right: auto;

would not effect the element width display:inline.

不会影响元素宽度显示:内联。

If your want it works, you should give a fixed width, and set display:block or display:inline-block.

如果你想要它的工作原理,你应该给出一个固定的宽度,并设置display:block或display:inline-block。

#2

For margin auto to work you need to have a width on the item.

要使margin auto工作,您需要在项目上有一个宽度。

#t { width: some-width; }

#t {width:some-width; }

http://jsfiddle.net/2sagZ/7/

#3

CSS

body{
    width:100%;
}

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    width:600px;
}
.tc {
    display:inline;
    border-style: solid;
    border-width:1px;
}

HTML

<body>
<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>
</body>

is that wat you want?

那是你想要的吗?

http://jsfiddle.net/ahmadalli/2sagZ/5/

#4

You're displaying your articles inline. Only block elements can be centered by setting their margins to auto. So you need to make them block level elements for margin: auto to work.

您正在以内联方式显示文章。只有块元素可以通过将其边距设置为自动来居中。所以你需要让它们阻止级别元素的余量:自动工作。

Your main section tag has a width of 100% by default. So you can't center it if it already fills the screen. So you need to make the width less then 100% for margin: auto to work.

默认情况下,您的主要部分标记的宽度为100%。因此,如果它已填满屏幕,则无法居中。所以你需要使宽度小于100%的余量:自动工作。

#5

#t needs a width in order to be centered.

#t需要一个宽度才能居中。

The articles won't be centered when set to display:inline.

设置为display:inline时,文章不会居中。

#6

You could try giving the width a percentage, like width: 75%;. I would also give positioning to the divs, I recommend using relative.

您可以尝试给宽度一个百分比,如宽度:75%;。我也会给div定位,我推荐使用亲戚。

#7

if you are using inline styling you can just use text-align: center

如果您使用内联样式,则可以使用text-align:center

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}

#8

#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}

#1

margin-left: auto;
margin-right: auto;