中心一切

Question

我正在制作这个项目，我希望所有内容都集中在页面中间，我似乎无法保证：0px auto;工作，任何人都可以帮助我吗？

（示例代码：）

<div class="barra2">
    <img src="barra2/botao_series_rotax.png">
    <img src="barra2/botao_trofeu_rotax.png">
    <img src="barra2/bot_inscricpion.jpg"> 
    <img src="barra2/bot_class_online.jpg" >
    <img src="barra2/resultados_.png">
</div>

（让它居中）

这是整件事的小提琴

Fiddle

Answer 1

如果您只想将图像居中

<div class="barra2">
    <img src="barra2/botao_series_rotax.png">
    <img src="barra2/botao_trofeu_rotax.png">
    <img src="barra2/bot_inscricpion.jpg"> 
    <img src="barra2/bot_class_online.jpg" >
    <img src="barra2/resultados_.png">
</div>

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:block;
    clear:both;
    margin:10px auto;
 }

JSFIDDLE DEMO

更新

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:inline-block;
 }

JSFIDDLE DEMO INLINE

您可以为图像添加宽度，就像这样

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:inline-block;
    width:140px;
 }

DEMO INLINE-BLOCK 2

为您的网站添加此

.barra2 {
text-align: center;
width: 100%;
clear: both;/*this will solve the problem*/
}

Answer 2

除非父容器设置了margin:0 auto，否则

text-align:center;无法正常工作，请尝试将以下内容添加到您的CSS中：

body{
    text-align:center;
}

此外，居中的内容要么需要设置宽度，要么设置为display:inline-block;

Answer 3

div.barra2
{
text-align:center
}

Answer 4

将所有内容放在一个div中，给出div余量：auto;在css中

像这样：

div .everything {
      margin: auto;
      width: 1000px; /*You need to give a width, this can be 99% or 
something like this i.e. If you don't do this it won't work. */
}

Answer 5

只需在您的代码周围添加中心标记，最好是最好的方法，但它可以正常工作

中心代码之间的代码