css - 对齐搜索模块 : Joomla responsive website

Question

从昨天开始，我一直在尝试在 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>

虽然这是我目前正在使用的媒体查询:

@media only screen and (max-width: 450px) {

    .header-search .search-query {
        width: 60%;
        margin-left: 10%;
    }

    .input[type="image"] {
        width: 5px;
    }
}

我按照一些人的建议尝试了 text-align，还有 margin: 0 auto; ，但它没有改变任何东西。此外，我还想调整搜索模块右侧图片的大小，因为它在小屏幕上太大了。

感谢任何帮助/建议。

Answer 1

margin: 0 auto; 仅当元素是 block 元素并且具有以像素为单位的设置宽度而不是百分比时才有效，因此请尝试以下操作:

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