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