在低分辨率屏幕上将五个<div>元素居中并进行后退

debugcn 发表于 Dev

没人先生

我正在尝试设计一个带有这样的标题的网页：（imgur link）。

基本上，我想要一个居中徽标，在其下方有五个（或更多）链接。这就是棘手的地方：我想使中心链接与徽标图像的确切宽度匹配，并使其他四个链接左右浮动。

到目前为止，我有

<div id="logoDiv">
    <img id="logo" src="resources/images/logo.png" alt="logo image" width="300" height="138">
</div>

<div id="mainMenu" style="text-align:center;">

    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="1.html">link 1</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="2.html">link 2</a>
    </div>
    <div class="mainMenuDiv" id="mainMenuCenter" style="">
        <a class="menuItem" id="mainMenuItem" href="index.html">centered main link</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="4.html">link 4</a>
    </div>
    <div class="mainMenuDiv" style="">
        <a class="menuItem" href="5.html">link 5</a>
    </div>
</div>

但是，无论我在样式表（或现在空白的样式标签）中添加了什么内容，我都无法使五个div始终始终将中心一个居中，而与屏幕分辨率无关。使用display：indent-block; 和float：left || right; 我设法靠近，但是当屏幕不够宽时，我得到的是链接1 && / ||。徽标下的2看起来很糟糕。

我不应该将它们全部都放在容器中吗？我是否应该屈服并尝试使用javascript定位它们？我对HTML / CSS编程还很陌生，我不太确定这里使用的正确方法是什么，因此对您的帮助将不胜感激。

塞缪尔·内夫（Samuel Neff）

使用媒体查询在小屏幕上以所需方式显示内容。例子：

JSFiddle：http : //jsfiddle.net/LWP5V/2/

.mainMenuItemDiv {
    display:inline-block;
    vertical-align: top;
    width: 19%;
    text-align: center;
}

@media (max-width: 400px) {
    .mainMenuItemDiv {
        display: block;
        width: 100%;
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。