中心2个带有显示行内块的元素

Question

I have this simple CSS code: 我有这个简单的CSS代码：

div {
    width:100px;
    height:100px;
    border:1px solid #000000;
    display:inline-block;
    margin:0 auto;
    text-align:center;
}

And this HTML code: 这段HTML代码：

<div>
</div>
<div>
</div>

I'm having hard time trying to center those 2 DIVs horizontally across screen with inline-block . 我很难用inline-block在屏幕上水平定位这2个DIV。 Neither margin auto nor text-align center is working. margin auto或text-align center均不起作用。

Answer 1

text-align will align the inline contents of the element. text-align将对齐元素的内联内容。 So you will need to apply this property to the parent of your <div> s. 因此，您需要将此属性应用于<div>的父级。

text-align - MDN: text-align -MDN：

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align CSS属性描述了如何在其父块元素中对齐内联内容（如文本）。 text-align does not control the alignment of block elements itself, only their inline content. text-align不控制块元素本身的对齐，仅控制其内联内容。

In the case above, I guess it would be <body> : 在上述情况下，我想应该是<body> ：

body{
    text-align:center;
}

JSFiddle 的jsfiddle

中心2个带有显示行内块的元素

问题描述

1 个解决方案

解决方案1
1 2014-09-14 14:13:23

中心2个带有显示行内块的元素

问题描述

1 个解决方案

解决方案1 1 2014-09-14 14:13:23

解决方案1
1 2014-09-14 14:13:23