Question

我无法弄清楚这一点：如何在页面缩小后使文本与图像保持一致。

如图所示（1）：

Image here (1)

在lg屏幕上正常。

如图所示（2）：

Image here (2)

部分变大，文字“跑”远离图像。

Html（其中一半没有导航栏和2个部分）

<div id="mint"></div>
            <div class="" id="background1">
                <div class="container-fluid">
                    <img class="img-responsive" id="logo1" src="images/logo1.png"/>
                </div>
                <div class="container-fluid">
                    <p id="p1" class="" >A great new free psd theme to showcase your<br>new application.</p>
                </div>
                <div id="sicons">
                    <a href="https://www.apple.com">
                        <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" src="images/icon1.png"/>
                    </a>
                    <a href="https://www.android.com">
                        <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" style="margin-left: -15px; margin-right: -15px;" src="images/icon2.png"/>
                    </a>
                    <a href="https://www.microsoft.com">
                    <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" src="images/windows3.png"/>
                    </a>
                </div>
            </div>
    </header>
<section>
            <div class="container" id="white">
                <div id="icons">
                    <img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:34%;" src="images/icon4.png"></img>
                        <p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left:-0%; top:150%;" ><span><b>Editable Theme</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.<br><br><br><br><br></p>
                    <!--<img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:68%" src="images/icon5.png"></img>
                        <p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left: 68%; top:125%;" ><span><b>Flat Design</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.</p>
                    <img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:106%" src="images/icon6.png"></img>
                        <p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left:139%; top:125%;" ><span><b>Reach Your Audience</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.</p>-->
                </div>
            </div>
        </section>

        <section>
            <div id="grey">
                <div class="container">
                    <p class="p" style="font-size:23px; margin-top:49px; left: 15%; position:absolute;"><b>Get Notified Of Any Updates!</b></p>
                    <p class="p" style="color: grey;  left: 15%; position:absolute; margin-top: 109px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla<br>fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum<br>mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare<br> luctus id sollicitudin ante lobortis at.</p>
                            <div class="notify">
                                <div class="input-group">
                                     <input type="email" class="form-control" placeholder="Email Address">
                                         <span class="input-group-btn">
                                            <button class="btn" type="submit" id="button" style="margin-top:">Notify</button>
                                         </span>
                                     </input>
                                </div>
                            </div>
                    <div class="hidden-xs">
                        <iframe id="iframe" src="https://www.youtube.com/embed/mFfe4ZRQOH8" allowfullscreen></iframe>
                    </div>
                </div>
            </div>  
        </section>

CSS :(也是其中的一半）

                    body {
                margin: 0px;
                padding: 0px;
                font-family: sans-serif;
                }

                #black {
                height: 48px;
                background-color: #282828;
                }
                /*------------NAVBAR DALYKAI-------------------------*/

                #login-dp{
                min-width: 250px;
                padding: 14px 14px 0;
                overflow:hidden;
                background-color:rgba(255,255,255,.8);
                z-index
                }
                #login-dp .help-block{
                font-size:12px    
                }
                #login-dp .bottom{
                background-color:rgba(255,255,255,.8);
                border-top:1px solid #ddd;
                clear:both;
                padding:14px;
                }
                #login-dp .social-buttons{
                margin:12px 0    
                }
                #login-dp .social-buttons a{
                width: 49%;
                }
                #login-dp .form-group {
                margin-bottom: 10px;
                }
                .btn-fb{
                color: #fff;
                background-color:#3b5998;
                }
                .btn-fb:hover{
                color: #fff;
                background-color:#496ebc 
                }
                .btn-tw{
                color: #fff;
                background-color:#55acee;
                }
                .btn-tw:hover{
                color: #fff;
                background-color:#59b5fa;
                }
                @media(max-width:768px){
                #login-dp{
                    background-color: inherit;
                    color: #fff;
                }
                #login-dp .bottom{
                    background-color: inherit;
                    border-top:0 none;
                }
                }
                /*-------------------------------------------------------------------------------------------------------------------------*/



                #mint {
                height: 10px;
                background-color: #2ecc71;
                }

                #background1
                {
                height: 600px;
                background-image: url("images/background1.jpg"); 
                background-repeat: no-repeat;
                background-size:100%;
                }


                .p {
                font-family: Myriad Pro;
                }

                #logo1 {
                width: 10%;
                margin-left: 20%;
                margin-top: 11%;
                }

                #logo2 {
                margin-top: 5%;
                }

                #p1 {
                font-family: helvica-thin;
                margin-left: 20%;
                margin-top: 2%;
                color: white;
                font-size: 1.5vw;
                }

                #sicons {
                position: absolute;
                margin-left: 20%;
                background-color: grey;
                z-index: 1;
                }

                #sicons a:hover {
                color: green;
                }

                #white {
                height: 350px;
                }

                #icons {
                position: absolute;
                width: 35%;
                }

Answer 1

我建议您停止使用position: absolute，并以有响应的方式了解如何执行此类操作，例如text-align和margin: auto

您发布的代码段是复杂的，这样一个简单的任务，所以我删除了所有不需要的元素，以显示这是多么容易。

＆＃13;

.text-align-center {
  text-align: center
}
section.text-align-center span {
  font-weight: bold;
}
section.text-align-center div {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

＆＃13;

<header class="text-align-center">
  <img src="http://placehold.it/90/f00" alt="">
</header>
<section class="text-align-center">
  <span>
    Edit theme
  </span>
  <div>
    Some other text that will as well stay centered with the above two
  </div>
</section>

＆＃13;

如何在页面调整大小后使图像保持在一起？

1 个答案: