可以更改大小的 div 的另一个居中问题

Question

我正在尝试将 div 中的 2 个项目居中对齐。第一个输入框工作正常，因为我可以硬编码宽度。第二个是下拉菜单，将根据内容更改其宽度，因此我无法对宽度进行硬编码。 Text-align 也会使标签居中， display:inline 会破坏居中，我不想对 JS 进行更改，但我确实意识到这是一个选项。

http://jsfiddle.net/56cgcudb/2/

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div style="width: 160px; margin: 0 auto; border: solid;">
        <label for="Search" style="">Search</label>
        <input type="text" name="Search" id="Search" placeholder="Search" style="width: 125px" />
        <a class="icon-btn" href="#" style="">
            <i class="icon-magnifier-dark" style=""></i>
        </a>
    </div>
</div>

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 " style="">
    <div style=" display: inline-block; margin: 0 auto; border: solid;">
        <label for="dropdownMenu2">Drop Down</label>
        <div class="dropdown" style="">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="">
                option 1
                <span class="caret" style=""></span>
            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="">
                <li>
                    <a href="#">Option 1 asdasdasd</a>
                </li>
                <li>
                    <a href="#">Option 2</a>
                </li>
                <li>
                    <a href="#">Option 3</a>
                </li>
                <li>
                    <a href="#">Option 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

这是我为水平居中内容所做的工作。创建一个 CSS 类：

// Classes
.center-block {
  margin-left: auto;
  margin-right: auto;
  width: 100%; // IMPORTANT: width has to be set to something or centering will not work. You can use ems, but percentages gives you responsive sizing 
}

那么 text-align 呢？我更喜欢这种方法而不是简单的 text-align，因为这种结构将使 div 中的所有对象居中，而不仅仅是文本。

在你的代码示例中

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 center-block">

或者，您需要在 <div> 中居中放置内容

---

更新：居中对齐内容和左对齐文本

 // Classes
    .center-block-left-text {
      margin-left: auto;
      margin-right: auto;
      width: 100%; 
      text-align: left !important;
    }

这是一个很好的官方CCS reference，关于各种居中。