将输入定位在导航栏的中间

我正在尝试将输入字段放在 nabvar 的中间以用作实时过滤器输入。在该输入的右侧应该是一个范围，它将显示匹配的数量（它的值使用 jQuery 更改）。我开始使用文本对齐：中心 CSS 属性，但是，由于跨度最初是隐藏的，当显示时，它将输入移到左侧（使组输入 + 跨度居中，考虑到 CSS 规则，这很有意义）。

另外，我似乎无法使用CSS更改输入宽度（我可以使用HTML标签上的size属性来更改

这是 HTML：

<nav class="navbar navbar-default navbar-fixed-top navbar-erat">
    <div class = "navbar-header">
     <button type="button" class="navbar-toggle well-bg" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
        <span class="fa fa-bars fa-lg fa-fw"></span>
      </button>
    </div>
    <?php if (isset($livefilter)): ?>
        <div class = "navbar-form navbar-form-center">
            <input type = "text" id = "filter" class = "form-control search-input" placeholder = "Filtro"> 
        <span id = "filter-count"></span> 
        </div>
    <?php endif; ?>
</nav>

这是相应的 CSS：

.navbar-erat {
    background: #EEEAF7 !important;
    width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #D6C9F5 !important;
}
.navbar-form-center {
    text-align: center;
    margin-top: 12px;
    position: fixed;
    width: 100%;
}
.search-input {
    -webkit-border-radius: 50px !important; //For Safari, etc.
    -moz-border-radius: 50px !important; //For Mozilla, etc.
    border-radius: 50px !important; //CSS3 Feature
}

以防万一，与他们一起操作的jQuery：

<script>
    $(document).ready(function() {
        $('#filter').hide().fadeIn(1000);
        $("#filter").keyup(function() {
            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(),
                count = 0;
            $(".info-filter").each(function() {
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();
                    // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });
            // Update the count
            var numberItems = count;
            $("#filter-count").text(" " + count + " coincidencias encontradas");
        });
    });
</script>

所以，概括一下我有两个主要问题：

• 当范围出现时，阻止输入移动（以某种方式将其固定在导航栏的中间）
• 从 CSS 设置输入宽度

提前感谢，