0
我试图居中两个div之间的H4。我希望这是静态的，不管分辨率如何都保持在同一个地方。图标和表单不会移动，但h4文本会移动。我怎样才能让这个坐在一个地方，而不是移动？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/ico" href="images/logo-small.png">
</head>
<body>
<header>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style>
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; border-radius:20px; width:250px;}
h4{text-align:center;clear:both; position:absolute; top:80px; right:600px; font-size:42px; font-weight:bold; color:#26ADE4;}/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<!-- Header Information -->
<h4>21st Century Dad</h4>
<div id="header-content">
<a href="../index.php"> <img src="../images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:40px;" /> </a>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751; "></div>
</div>
</form>
</div>
<!--<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> -->
<!--End mc_embed_signup-->
</div></header>
<nav>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<!--Navigation Information-->
<ul>
<li><a href="../about/index.php">About</a></li>
<li><a href="../diy-projects/index.php">DIY Projects</a></li>
<li><a href="../dad-tech.php">Dad Tech</a></li>
<li><a href="../kid-stuff/index.php">Kid Stuff</a></li>
<li><a href="../ask-a-dad/index.php">Ask a Dad</a></li>
<li><a href="../dad-jokes.php">Dad Jokes</a></li>
</ul></nav>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<a href="about/index.php"><img src="images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;"></a>
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<a href="diy-projects/index.php"><img src="images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;"></a>
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<a href="dad-tech.php"><img src="images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;"></a>
</div>
<div class = "blocks">
<h1>Activity/Meal of the Week</h1>
<a href="kid-stuff/index.php"><img src="images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;"></a>
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<a href="ask-a-dad/index.php"><img src="images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;"></a>
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<a href="dad-jokes.php"><img src="images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;"></a>
</div>
</div><!-- end container -->
</main>
<footer>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<body link="#FFFFFF">
<div id="footer">
<p class="left">
<a href="mailto:[email protected]">E-mail 21st Century Dad</a>
<p class="right">
<a href="https://www.facebook.com/">
<img src="../images/facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../images/snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../images/instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div></footer>
</div>
</body>
</html>
h4的风格在头上。提前致谢！
能否请您编辑您的问题，并创建一个片段演示你的问题，与你目前使用的风格？ –
你说“两个div”，那么我们在这里谈论哪两个div？ –
而不是正确的，使用左边，它会一直呆在那个地方。通过使用正确的方式，当屏幕被调整大小时，这意味着正确的空间变化，这就是为什么它正在移动 – Pete