我想创建一个看起来像这样的菜单：

<div  id = "menu" style = "display: flex; justify-content: center;">
            <div class="row">    
                <div class="input-group">
                <span style="color:black" class="input-group-addon">
                     <select id="selection" onchange="getvalues(this.value)">
                     <option>Choose Category</option>
                     <option>Notary</option>
                     <option>Deed Date</option>
                     <option>Person</option>
                     <option>Place</option>
                     <option>Manuscript Reference</option>
                     <option>Subject</option>
                     </select>
                    </span>
                    <input class="autocomplete"id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="max-width:200px;" disabled=true >
                    <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
            </div>
            </div>
        </div>

我想集中显示菜单。有可能吗？此外，为什么选择类别下拉菜单和文本框的高度不同？