将一个没有元素的div居中

Question

我希望将DIV居中，而不会对DIV内的元素产生中心效果。

就我而言，我有这个输入（选择）：intl-tel-input

当我这样做时：

<center>
<div id="input">
  <input id="phone" name="phone" type="tel">
</div>
</center>

选择的选项也居中，即使选项容器也改变了位置。

这里我们有一个错误示例：http://jsfiddle.net/DtMwr/15/

感谢帮助我弄清楚。

Answer 1

您可以使用CSS来居中表单输入。像这样的东西会起作用：

<强> CSS

.center {
    margin: auto;
    width: 50%;
    border: 3px solid #73AD21;
    padding: 10px;
}

input[name=phone1] { width: 100%; }

<强> HTML

<div class="center">
  <input type="tel" placeholder="Primary Phone Number" class="input-large" id="p1" name="phone1"/>
</div>

这会将div置于其父级中心，并允许输入扩展到父div宽度的100％。您可以根据布局的需要调整div的宽度。

这里有一些很好的阅读：http://www.w3schools.com/css/css_align.asp

你可以看到它在这个JS小提琴中工作：http://jsfiddle.net/igor_9000/DtMwr/20/

另外，如果你还没有，你可能会考虑使用像bootstrap，foundation等框架。他们已经有了一个很好的框架来实现一个可以节省你时间的布局。

希望有所帮助！

Answer 2

首先，不要将center用作标签。只需将其作为带有ID的常规div。

<div id="input_wrapper">
<div id="input">
  <input id="phone" name="phone" type="tel">
</div>
</div>

然后，给外部div宽度为100％，内部div自动边距为固定宽度。

#input_wrapper {
    width: 100%;
}

#input_wrapper #input {
    margin-right: auto;
    margin-left: auto;
    width: 100px;   
}