Question

我正试图将h4置于两个div之间。我希望这是静态的，无论分辨率如何都保持在同一个地方。图标和表单不会移动，但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&amp;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:bahrn@my.uwstout.edu">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">
        &copy; Copyright 2017 21st Century Dad

</div></footer>


</div>
</body>
</html>

h4的风格在脑海中。提前谢谢！

Answer 1

仅使用left: 0; right: 0 h4。这将解决它

您所做的是将h4标记置于绝对位置并使用右侧的某个固定位置。如果你使用上面的代码，它将使元素h4 100％宽度，因为左边和右边是0，它是原点，你已经将文本居中对齐，所以它总是相对于父级居中。

Answer 2

如果您的h4是绝对定位的，您可以给它一个固定的宽度并将left和right设置为0和margin: auto;，或者您可以给它{ {1}}和width: 100%;我不知道你为什么绝对定位他们但这取决于你

text-align: center;

或

h4 {
    left: 0;
    right: 0;
    margin: 0 auto;
}

我可能误解了你的问题，如果你想将它放在另外两个元素的中心，将它们全部包装在容器中并使用flexbox：

<强> HTML

h4 {
    width: 100%;
    text-align: center;
}

<强> CSS

<div class="container">
    <div class="div-1"></div>
    <h4>Hey</h4>
    <div class="div-2"></div>
</div>

在标题中的两个其他Div之间居中文本

2 个答案: