Question

我有以下div块：

<div id="parent" class="parent">
    <form id="child" class="child"> <input  type="text" /> </form>
</div>

和css

.parent{
    margin:auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 350px;
    height: 450px;
    background-color: #f7f7f7;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.child{
    width:200px;
    height:180px;
    background: grey;
}

JSFIDDLE。请解释一下为什么当我们应用于内部表单width和height属性时，我们将表单的中心丢失为div块，但安全地将表单内容相对于表单居中。即使我们对此应用线性维度，input元素的居中也是安全的。实际上：JSFIDDLE。我糊涂了。为什么这个元素的行为在我们的情况下有所不同？

如果可能的话，请给我一个css specfication的引用。

Answer 1

.parent{


    position: absolute;
    text-align: center;
    width: 350px;
    height: 450px;
    background-color: #f7f7f7;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.child{
    margin:auto;
    width:200px;
    height:180px;
    background: grey;
}

文字对齐

text-align CSS属性描述了如何在其父块元素中对齐像文本这样的内联内容。 text-align不控制块元素本身的对齐，只控制它们的内联内容。

<强>边距：自动

将块本身居中而不使其内联内容居中的标准兼容方法是将左右边距设置为auto，例如：保证金：汽车;或保证金：0自动;或margin-left：auto;余量右：汽车;

了解更多信息。你可以点击下面的链接

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

http://jsfiddle.net/T9PvK/6/

将align-text：center与线性尺寸一起应用

1 个答案: