html - CSS 样式 - 调整浏览器窗口大小时元素向中心移动-6ren

html - CSS 样式 - 调整浏览器窗口大小时元素向中心移动

转载作者：行者123 更新时间：2023-11-28 08:25:52

我这里有一个网页。如果我更改浏览器窗口的大小，则会发生这种情况:http://gyazo.com/1be5c2f9aae817d0fa2603a51bea5d37浏览器窗口越小，两个横幅元素就越靠近中心。

我想知道是否有人可以帮助我阻止这两个元素在浏览器窗口大小更改时向中心移动，以便它们类似于本网站上的绿色和蓝色框:https://woodycraft.net/home/

这是我的 CSS 样式表:

/*CSS FOR ALL PAGES*/

/*BODY/WRAPPER SECTION*/

body {background:url('E:/Documents/CRAFT412-Website/images/SiteBackground.png');
      background-repeat: no-repeat;
      background-attachment: fixed;}

#wrapper {width: 1000px;
          margin: 0 auto;
          background-color: white;
          border-radius: 5px;
          box-shadow: 0px 1px 5px;}

/*TOP BANNER SECTION*/

#logo {margin-top: -90px;
       margin-bottom: -95px;
       text-align: center;}

#ip {float: left;
     margin-left: 458px;
     margin-top: -55px;}

#ip_text {float: left;
          margin-left: 449px;
          margin-top: -51px;
          color: white;
          font-size: 15px;}

#teamspeak_logo {float:right;
                 margin-right: 450px;
                 margin-top: -55px;}

这里还有该页面的 HTML:

<!DOCTYPE HTML>

<html>

<head>
    <title>CRAFT412 - Rules</title>
</head>

<!--PAGE LINKS-->

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/rules.css" rel="stylesheet" type="text/css" media="screen">

<!--HTML FOR ALL PAGES-->

<!--BODY SECTION-->

<body>

    <!--TOP BANNER SECTION-->

    <div id="banner">

                   <div id="logo"> 
                                <img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
                            </div>

                   <div id="ip">
                              <img class="top" src="images/CRAFT412 - Box - IP.png" alt="IP">
                           </div>

                   <div id="ip_text">
                                   <p>SERVER IP<P/>
                                   <p>craft412.serveminecraft.net<P/>
                               </div>

                   <div id="teamspeak_logo"> 
                                          <a href="ts3server://craft412.serveminecraft.net:9987">
                                          <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK"></a>
                                      </div>                                       
                                  </div>

    <!--WRAPPER SECTION-->

    <div id="wrapper">

                    <!--TOP NAV BAR SECTION-->

                    <div id="nav_bar">
                                    <ul>
                                      <li><a href="index.html">Home</a>
                                      </li
                                      ><li><a href="status.html">Status</a>
                                      </li
                                      ><li><a href="info.html">Info</a>
                                      </li
                                      ><li><a href="">Gamemodes</a> 
                                    <ul>
                                       <li><a href="survival.html">Survival</a>
                                       </li
                                       ><li><a href="pure-pvp.html">Pure-PVP</a>
                                       </li
                                       ><li><a href="gamesworld.html">Gamesworld</a>
                                       </li>
                                    </ul>
                                       </li
                                       ><li><a href="rules.html" class="active-page">Rules</a>
                                       </li
                                       ><li><a href="vote.html">Vote</a>
                                       </li
                                       ><li><a href="contact.html">Contact</a>
                                       </li>
                                    </ul>
                                </div>

                    <!--RULES CONTENT-->

                    <div id="rules_title">
                                        <h3>RULES</h3>
                                    </div>

                    <div id="global_rules_info">
                                              <h3>GLOBAL RULES</h3>

                                              <p>Global rules follow across the entire server</p>

                                              <p>All players are expected to comply to all of the listed rules or they will be muted, kicked, timed out or banned</p>                                       
                                          </div>

                    <div id="global_rules">             
                                         <h4>Rule listing:</h4>

                                         <ul>
                                           <li>No griefing</li>
                                           <li>No flying. (Unless you've been given a high enough rank)</li>
                                           <li>No unauthorized mod usage</li>
                                           <li>No hacked clients</li>
                                           <li>No cheating</li>
                                           <li>Show all other players respect. Including staff</li>
                                           <li>No begging for rank</li>
                                        </ul> 

                                         <p>All rules are enforced by staff in a strict manner</p>
                                     </div>                                          

                    <div id="punishments">                     
                                        <h4>Punishments can include:</h4> 

                                        <ul>
                                          <li>Privilages taken away</li>
                                          <li>Mutes</li>
                                          <li>Prison (Survival)</li>
                                          <li>Temporary bans</li>
                                          <li>Permanent bans</li>
                                          <li>IP bans</li>
                                       </ul>
                                   </div>

                    <div id="survival_rules_title">                                                                                                                          
                                                <h3>SURVIVAL RULES</h3>
                                             </div>

                    <div id="survival_rules"> 
                                           <h4>Rule listing:</h4>

                                           <ul>
                                             <li>Global rules</li>
                                             <li>Don't build to close to other peoples creations, keep a reasonable distance</li>
                                             <li>No begging for materials</li>
                                          </ul>
                                      </div>
                                  </div>

                    <!--HTML FOR ALL PAGES-->

                    <!--BOTTOM FOOTER SECTION-->

                    <div id="bottom_footer">                    
                                          <div id="created_by">
                                                             <p>© 2015 GR412</p>
                                                         </div>

                                          <div id="social_media_youtube"> 
                                                                       <a href="https://www.youtube.com/user/GR412" target="_blank">
                                                                       <img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
                                                                   </div>

                                          <div id="social_media_twitch"> 
                                                                      <a href="http://www.twitch.tv/gr412" target="_blank">
                                                                      <img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
                                                                  </div>

                                          <div id="social_media_twitter"> 
                                                                       <a href="https://twitter.com/GR412" target="_blank">
                                                                       <img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
                                                                   </div>

                                          <div id="social_media_facebook"> 
                                                                        <a href="https://www.facebook.com/GR412" target="_blank">
                                                                        <img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
                                                                    </div>                                                                

    </div>

</body>

</html>

最佳答案

我想你不想让按钮向中心移动？

#ip_text {float: left;
      margin-left: 449px; // Try remove this
      margin-top: -51px;
      color: white;
      font-size: 15px;
}

#teamspeak_logo {float:right;
      margin-right: 450px; // Try remove this
      margin-top: -55px;
}

关于html - CSS 样式 - 调整浏览器窗口大小时元素向中心移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28531549/

文章推荐： html - position=fixed div 内 div 的 margin-right

文章推荐： javascript - Mouseenter 内部的函数不改变 Attr

文章推荐： Javascript Koans - 数组引用

文章推荐： javascript - 在具有动态高度的背景图像上创建渐变叠加

java - 如何将 IE 浏览器 session 切换到 Chrome 浏览器 session ？
我的“登录”是在 IE 浏览器中进行的，登录后，如果我单击链接，它们就会在 Chrome 浏览器中打开。如何在同一个测试用例中将我当前的浏览器从 IE 切换到 Chrome。如果我创建一个 chrom
css - 在 Firefox 中，与 css 内容属性一起使用的特殊字符比在 Firefox 中更薄。浏览器/浏览器
您好，我不明白在 Firefox 的内容属性中使用的特殊字符的不同显示行为。我已经剥离了一切并创造了一支笔: http://codepen.io/rpkoller/pen/Fbgav 在其“基本形式”
java - Spring Data REST - HAL 浏览器 - 返回 HAL 浏览器 HTML 而不是 API 的根
我正在研究 Spring Data REST，特别是 HAL 浏览器。我一直在关注 http://docs.spring.io/spring-data/rest/docs/current/refere
Jquery if 浏览器
我正在使用工具提示，在 ie 上出现定位错误。我放了jquery浏览器代码我的工具提示 $('.tooltip').tooltip({ position: "bottom center"
javascript - bluebirdjs协程错误处理(浏览器)
我应该如何处理蓝鸟协程中的错误？我使用co in节点已有一段时间，它具有出色的捕获功能。 co(function*() { return new Promise(function(resol
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
javascript - 浏览器/JavaScript同源策略如何应用于二级域名？
我有一些 JavaScript 在同一域上的两个独立服务器之间共享请求。 .com 是 JavaScript 中域的要求吗？在这种情况下，两台服务器都位于 .abc.tyy 域上，tyy 通常是 .
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
构建以前版本的 Chromium 浏览器
我正在尝试构建仍支持 NPAPI 的先前版本的 Chromium 浏览器。我已经获得了代码，并且可以使用 stand build 命令在我的 mac 上构建最新版本的 Chromium gclient
python - Python 浏览器
我环顾四周，找不到 browscap 的 Python 等效项(我在 PHP 中使用它来检测给定的用户代理字符串是什么浏览器。我希望我不必自己写......:P 最佳答案看看这个，它应该做你想要的
javascript - 浏览器 - 文件编写器扩展？
是否有任何 chrome 或 firefox 扩展允许 javascript 在客户端 PC 中创建写入文件？最佳答案你想做什么？ HTML5 有一个 File API .这是最好的解决方案，因为
javascript - 浏览器/选项卡关闭检测时发出警报
当我点击链接或刷新或关闭标签页时，我有这段代码会发出警报。但我需要在关闭窗口(选项卡)上仅发出警报。怎么做？我的网站上有很多外部和内部链接。
javascript - Angular +浏览器
我目前正在尝试使用 Browserify + Angular，但我遇到了一个奇怪的问题。我在我的 Controller 的子目录中创建了一个名为 controllers/start-controlle
testing - 响应式布局针对哪些设备/浏览器
我正在为客户(项目已被接受，但现在是解释不同功能的问题)写一份详细的估算，以开发一个响应式布局的网站。这不是我第一次进行此类开发，但这是一个关键客户，必须铺平道路。布局将从 300px 宽度调整到
css - 浏览器/网络邮件客户端中的默认打印样式
我在时事通讯上设计了一些黑底白字。由于时事通讯在打印时看起来不错且可读。我需要使布局和文本与浏览器中的内容相似。通常情况下，黑色文本和无背景颜色是浏览器/网络邮件客户端的默认打印样式吗？最佳答案
Android 浏览器 - 无法将输入文本从白色更改为黑色
我有一个使用 GWT/mGWT 构建的移动友好网络应用程序。该应用程序有白色输入文本框和深灰色输入文本。但是，在 Android 浏览器上，文本显示为白色，因此是不可见的。我尝试的所有 CSS 都无法
javascript - 浏览器 - 强制重新加载删除cookie？
我创建了一个带有选择输入的页面来更改正在使用的 jQuery UI 主题。当主题更改时，它会存储在 cookie 中。页面加载时，如果 cookie 存在，则恢复主题，否则加载默认主题。当我使用 F
css - 浏览器/渲染引擎如何知道在哪里连接单词？
在我的 CSS 中，我使用了以下代码片段: word-break: break-word; -webkit-hyphens: auto; hyphens: auto; 渲染引擎如何知道在所有不同语言中
CSS WordPress 浏览器
我的网络浏览器 Safari 有问题，我在 Chrome、FireFox 中测试了我的网站。 Safari 版本也是正确的，但是，当需要在 1920x1080 或更高分辨率下对其进行测试时，它无法正常
PHP headless 浏览器？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 样式 - 调整浏览器窗口大小时元素向中心移动