Aligning text in the middle of two divs within a header

Screenshot

Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot?

<!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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d4e475d416f4256015a585c5b405a5b014a4b5a">[email protected]</a>">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>

The styling for the h4 element is defined in the header section. Hope this helps!

htmlcss

Answer №1

Simply apply the CSS rule left: 0; right: 0 to the h4 element. This will resolve the issue.

The current setup places the h4 tag in an absolute position with a fixed distance from the right side. By using the suggested code, the h4 element will fill 100% of the width since both left and right properties are set to 0, creating a centered alignment within its parent container.

Answer №2

If you have an absolutely positioned h4, there are two ways to style it: either give it a fixed width with left and right set to 0 and margin: auto;, or use width: 100% with text-align: center;. The decision to absolute position them is completely up to you.

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

Alternatively,

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

If I misunderstood your question and you want to center the h4 between two other elements, wrap everything in a container and utilize flexbox:

HTML

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

CSS

.container {
    display: flex;
    justify-content: space-between;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process to create text in bold format in an HTML document?

I'm having difficulty making certain text bold with HTML. Unfortunately, I can't seem to figure out the correct method. Here is my attempted code snippet: Some <bold>text</bold> that I'm trying to highlight. Could someone prov ...

csshtml

fullPage.js with linear scroll

Is there a way to implement fullpage.JS without any transitions between slides? I attempted the following setup, but it didn't work as expected: $('#fullpage').fullpage({ licenseKey: 'XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX', ...

javascriptjqueryhtmlfullpage.js

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

Show the WooCommerce checkout shipping fields and eliminate the "Choose a different delivery address?" checkbox

Is there a method to eliminate the checkbox labeled "Ship to a different address?" on the woocommerce checkout page while still displaying the shipping fields? I have attempted the following: add_filter( 'woocommerce_cart_needs_shipping_address', ...

phpcsswordpresswoocommercecheckout

Using jQuery, is there a way to move an element from one div to another, but only if the destination div is currently empty

<div id="apply"></div> <div id="droppable_slots"> <div class="slot 1">1</div> <div class="slot 2">2</div> <div class="slot 3">3</div> </div> Is there a way to utilize jquery in order ...

javascriptjquerycsshtml

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...

javascripthtmlcss

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...

javascripthtmlarrays

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Introduction to Flask with GAE (blank Firefox tab)

Recently, I completed the Getting Started with Flask on App Engine Standard Environment tutorial. If you are interested, you can find the source code here. During my testing using Firefox and Chrome, I noticed that both browsers did not render the HTML te ...

htmlpython-2.7google-app-enginefirefoxflask

Automatically close one option upon opening another

Displayed below is the HTML code that I have printed with echo: <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="toggle_status"> <select class="status_change"> <option>Ac ...

javascriptphpjqueryhtmlajax

Tips on adjusting video to the screen size

I am looking to create a fullscreen video for my webpage. I originally used an image as a cover, but now I want to switch to using a video. You can check out my old code on this link. Below is my new video code: <div class="embed-responsive embed-resp ...

jqueryhtmlcssvideo

Struggling with aligning mat-icon in the center using HTML and CSS?

My issue is that the mat-icon in my generated columns is not center aligned. What could be causing this? When using ngFor to generate my datatable columns dynamically, none of them align correctly. The mat-icon inside my DIV defaults to left alignment. ...

htmlcssangularngx-bootstrapngx-datatable

How to interrupt a JQuery animation and restart it from the middle?

Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decid ...

javascriptjqueryhtmlcss

Press the toggle switch button to easily switch between two distinct stylesheets

With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...

javascriptcss

No action is triggered when the button is hovered over

I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening. The primary button at the bottom is also experiencing the same issue. body { background-color: #aa ...

htmlcsshover

Modify the rows in an HTML table in a Django project to have matching cell values displayed in the same color

I have set up a table in my HTML file for a Django project, with raw data extracted from the provided list sample below (only showing a few lines due to length): mylist= [{'StartDate': '2021-10-02', 'ID': 11773, 'Receiver ...

htmldjangolistdataframedatatable

Discover the method for measuring the size of a dynamically generated list

I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...

javascriptphpjqueryhtml