html - 缩放移动应用程序会导致 float 元素和文本不居中

Question

我有一个相当简单的网页，但存在响应式设计问题。它有一个 float 的标题栏，占据了主体宽度的 100%(移动设备上是整个屏幕)

它里面的文本应该是居中的 <h1>文本居中且旁边有“汉堡包”导航的元素。

为了实现这一点，我在导航栏上使用了绝对定位，并在标题栏上使用了固定定位(以便在向下滚动时它会保持在顶部)。但是，当用户放大时，所有内容都会变大，因此文本会撞到汉堡包导航(本质上只是一个带有背景图像的 div，由于绝对定位而从流中删除)并且也会变得比屏幕大。我怎样才能避免这种情况？

HTML

    <section class="main firster" id="homeSection">

            <nav id="homeNav">

                <div class="menuIcon" id="menuIcon"></div>

                <ul id="navUl">
                    <li class="mobileShow"><a href="index.html" class="mobileShow">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="sleep.html">Sleep</a></li>
                    <li><a href="dine.html">Dine</a></li>
                    <li class="current"><div id="tm">Tierra Magnifica</div></li>
                    <li><a href="relax.html">Relax</a></li>
                    <li><a href="play.html">Play</a></li>
                    <li class="lastList"><a href="party.html">Party</a></li>
                    <li class="contactButton largeHide realContact">Contact Us</li>
                    <li class="navImage largeHide"><img src="media/navMenu.png"></li>
                </ul>

            </nav>

        <div class="tierraDiv about noNav" id="mobileFlag"><p>Tierra <br>Magnifica</p></div>
    </section>

CSS

.menuIcon {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    width: 2.2em;
    height: 2.2em;
    margin: .2em .2em 0 .4em;
    background: url('../media/nav.png') center;
    border: .15em solid #757170;
    -webkit-border-radius: .4em;
            border-radius: .4em;
}

nav {
    z-index: 30;
    position: fixed;
    text-align: center;
}

nav ul, .mobileNotClicked, nav:hover ul.mobileNotClicked {
    z-index: 20;
    display: none;
    position: fixed;
    background-color: #FBF7EE;
    left: 0;
    margin: 0;
    top: 2.6em;
    width: 14em;
}

nav:hover ul, .mobileClicked {
    display: block;
    border-top: .45em solid #9AD5E6;
}

ul #navUl {
    padding: 0;
}

#navUl li {
    text-transform: uppercase;
}

nav li {
    list-style-type: none;
    width: 9em;
    padding: .6em 0;
    margin: 0 auto;
    border-bottom: 1px solid #757170;
    font-family: "PlantinMTStd-Light";
}

nav li.lastList {
    border: none;
}

nav li.navImage {
    width: 100%;
    border: none;
}

nav li.contactButton {
    margin-top: .3em; 
    width: 9em;
    background: #FBF7EE;
    border: .25em solid #757170;
    font-family: "Gothamer";
}



.menuIcon {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    width: 2.2em;
    height: 2.2em;
    margin: .2em .2em 0 .4em;
    background: url('../media/nav.png') center;
    border: .15em solid #757170;
    -webkit-border-radius: .4em;
            border-radius: .4em;
}

这些图片应该可以说明问题(尽管您在这里看不到屏幕上的文本滚动):

Answer 1

您必须将 .tierraDiv 设置为固定宽度(150 像素)，并使用 margin: 0 auto 将 .tierraDiv 居中。 “auto”将使 150 像素宽的 .tierraDiv 在页面中间水平居中。

在 .tierraDiv 中，您必须设置 p“text-align: center”，以便它使您的段落(或 h1)在 150px 内居中。

当您现在缩放时，您的导航图标仍会碰到 .tierraDiv 但有足够的空间(150 像素)，因此不再有视觉问题。

这是您必须添加到此处提供的 CSS 的代码:

.tierraDiv {
    width: 150px;
    margin: 0 auto;
}

.tierraDiv p {
    text-align: center;
}