jquery - 如何在段控件中居中 li 元素？

Question

所以我在 html 中创建了一个段控件:

<div id="jobboard-segment-control">
        <ul id="segmented-control" class="segmented-control">
            <li id="1"><a>1</a></li>
            <li id="2"><a>2</a></li>
            <li id="3"><a>3</a></li>
        </ul>
</div>

现在我试图将它的样式设置为当用户单击其中一个片段时，该片段会改变颜色并变大(高度)。到目前为止，一切都按照我的意愿发生，除了所选段的高度向下增长而不是从顶部和底部均匀增长。有没有办法让段从顶部和底部均匀增长？还是在它变高后居中？

这是CSS:

.segmented-control {
background-color: #fff;
list-style-type: none;
width: 252px;
height: 26px;
margin-top: 8px;
padding: 0px;
float: left;
display: table-row;
/*margin: 0 auto;*/

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.segmented-control li {
cursor: pointer;
background-color: #000;
float: left;
margin-left: 1px;
height: 26px;
}

.segmented-control li.selected {
    /*background-color: #27688e;*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 32px;
    border: 1px solid #579bc0;   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#579bc0), color-stop(100%,#27688e));   
}

这里是点击事件的js。它只是从 li 中删除选定的类并将其添加到被单击的类中:

    $('li').removeClass('selected');
    $(this).addClass('selected');

Answer 1

如果我没有遗漏任何东西，您可以简单地为所选类应用 margin-top:-3px;(添加高度/2)。

$("li").click(function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

.segmented-control {
  position: relative;
  background-color: #fff;
  list-style-type: none;
  width: 252px;
  height: 32px;
  margin-top: 8px;
  padding: 0px;
  float: left;
  display: table-row;
  /*margin: 0 auto;*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.segmented-control li {
  cursor: pointer;
  background-color: #000;
  float: left;
  margin-left: 1px;
  width: 10px;
  height: 26px;
}
.segmented-control li.selected {
  margin-top: -3px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 32px;
  border: 1px solid #579bc0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #579bc0), color-stop(100%, #27688e));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="jobboard-segment-control">
  <ul id="segmented-control" class="segmented-control">
    <li id="1"><a>1</a>

    </li>
    <li id="2"><a>2</a>

    </li>
    <li id="3"><a>3</a>

    </li>
  </ul>
</div>