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;
}

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

1 个答案: