Css 对齐搜索模块：Joomla响应网站

从昨天开始，我一直在尝试在Joomla上对齐我的搜索模块它的网站，使其在移动设备上的响应，但它没有工作的方式，我希望它这样做。我想做的就是将这个模块对准屏幕的中心。这是HTML代码：

<div class="header-search pull-right">
    <div class="search">
        <form class="form-inline" method="post" action="/aidet/">

    <label class="element-invisible" for="mod-search-searchword"></label>
    <input id="mod-search-searchword" class="inputbox search-query" type="search" placeholder=" " size="5" maxlength="200" name="searchword"></input>
    <input class="button" type="image" onclick="this.form.searchword.focus();" src="/aidet/templates/protostar/images/searchButton.gif" alt="Buscar"></input>

            <input type="hidden" value="search" name="task"></input>
            <input type="hidden" value="com_search" name="option"></input>
            <input type="hidden" value="111" name="Itemid"></input>
        </form>
    </div>
</div>

我按照一些人的建议尝试了文本对齐，还尝试了边距：0 auto，但这并没有改变任何事情。另外，我还想调整搜索模块右侧的图像大小，因为它在小屏幕上非常大

---

感谢您的帮助/建议。

页边距：0自动

仅在元素是

块

元素且具有设置的像素宽度（而不是百分比）时才起作用，因此请尝试以下操作：

.header-search .search-query {
    width: 200px;
    margin: 0 auto;
    display: block;
}

---

这几乎就是我需要的。但是，搜索框右侧的图像搜索按钮现在位于其下方，而我忘了说我需要它位于同一行。我尝试将display:block更改为inline block，但随后它会忽略您注释时的边距。在这种情况下，我将在父元素的同一行中包装两个您想要的元素，并将我的答案中的CSS应用于该父元素，而不是headit还不起作用。我尝试在.header搜索中添加您的代码，但图像仍在搜索框下方。然而，我在CSS上注意到图像的这些样式：。表单内联输入{显示：内联块；页边距底部：0px；垂直对齐：中间；}输入，文本区域，.不可编辑输入{页边距左侧：0px；}按钮，输入，选择，文本区域{页边距：0px；字体大小：100%；垂直对齐：中间；}我尝试过更改。表单内联输入也要显示：block，但没有更改。您能创建一个JSFIDLE或提供到您的站点的链接吗？这太复杂了。只需要搜索部分和当前正在使用的CSS。不是整个档案。

.header-search .search-query {
    width: 200px;
    margin: 0 auto;
    display: block;
}