html - 从兄弟元素继承对齐方式的 div 文本

Question

我正在尝试调整元素中文本的水平对齐方式，div以便在该元素内留下一些填充（下图为“所需外观”）。它似乎与前一个兄弟的内容对齐div（下面的图片“当前外观”）。我怀疑该解决方案在使用正确display属性类型的范围内，但我已经摸索了几个小时并且可以使用一些指导。

JsFiddle 链接

当前外观

想要的样子

CSS/HTML

/* Table Tabs */

div.Table_control {
  border-collapse: collapse;
  padding: 10px 0px 0px 15px;
}

div.DtTabs {
  display: inline-block;
  float: left;
  vertical-align: bottom;
}

div.Table_control * {
  margin-bottom: 0px;
  vertical-align: bottom;
}

div.DtTab_text {
  border-radius: 15px 15px 0px 0px;
  border-color: #880015;
  background: #ff4d67;
  bottom: 7px;
  color: #FFF;
  font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  margin: 0px;
  padding: 0px;
  width: 190px;
  text-align: center;
  text-shadow: 0px 1px 2px #000;
  vertical-align: middle;
}

div.DtTab_text.ActiveScope {
  border-radius: 15px 15px 0px 0px;
  border-collapse: separate;
  bottom: 8px;
  background: #880015;
  font-size: 22px;
  font-weight: 400;
  width: 200px;
  text-shadow: 0px 1px 3px #000;
}

div.DtControls {
  text-align: right;
}

div.dataTables_length,
div.dataTables_filter,
div.DtTabs>* {
  display: inline-block;
  position: relative;
}

div.dataTables_filter {
  padding-right: 5px;
  margin-right: 10px;
}

div.dataTables_length {
  margin-right: 5px;
}


/* DataTable Labels */


/* DataTable Labels */

div.DtLabel {
  width: inherit;
  background: #880015;
  border-collapse: separate;
  border-radius: 10px 0px 0px 0px;
  color: #fff;
  display: block;
  font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 14pt;
  height: auto;
  vertical-align: bottom;
  text-align: left;
  text-shadow: 0px 1px 3px #000;
}

<div class="Table_control">
  <div class="DtTabs">
    <div class="DtTab_text ActiveScope">Administrators
      <a class="DtTab_Ext"></a>
    </div>
    <div class="DtTab_text">APT Group
      <a class="DtTab_Ext"></a>
    </div>
    <div class="DtTab_text">IT
      <a class="DtTab_Ext"></a>
    </div>
  </div>
  <div class="DtControls">
    <div class="dataTables_filter" id="AdminUnrankedSRs_filter"><label>Search:<input aria-controls="AdminUnrankedSRs" type="search" placeholder=""></label></div>
    <div class="dataTables_length" id="AdminUnrankedSRs_length"><label>Show <select name="AdminUnrankedSRs_length" aria-controls="AdminUnrankedSRs">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="100">100</option>
        </select> entries</label></div>
  </div>
</div>
<div class="DtLabel">UNRANKED</div>

标签： htmlcssdomtext-align