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

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

javascripthtmlarrays

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

javascriptcssreactjsleaflet

Issue with autoplay slideshow functionality not activating when opened in a new tab

The owl.carousel.js plugin is used for creating a jQuery slideshow. Initially, the slideshow works correctly, but I noticed that the autoplay feature stops working when I open a new tab in Firefox or Chrome. Demo : Demo : $(document).ready(function () ...

javascriptjqueryhtmlcssowl-carousel

What is the method to assign multiple values to ng-disabled in AngularJS?

Is there a way to assign multiple values for ng-disabled in AngularJS? The issue I'm facing is demonstrated in the following JS Fiddle: http://jsfiddle.net/FJf4v/10/ <div ng-app> <div ng-controller="myCnt"> <h3>A ->> ...

javascripthtmlangularjsangularjs-directive

Plugin for jQuery that paginates text when it overflows

Looking for a solution here. I have a fixed width and height div that needs to contain text. If the text exceeds the size of the div, I want it to paginate with dots at the bottom of the page indicating each page, similar to slideshow functionality. Are t ...

jqueryhtmlcssclient-side

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

androidapihtml

Why isn't my content appearing correctly on different pages?

This ecommerce site is my very first project using React. I have created pages for Contact, Login, and more. The footer and other components display correctly on the home page, but when navigating to other pages, the content appears shortened. For referen ...

javascripthtmlcssreactjsdom

Are HTML files and PHP generated files cached differently by web browsers?

My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...

phphtmlcachingnginx

If the option is 'Gel', use an if statement to console log

I'm trying to console.log the option from the data() function that is equal to 'Gel'. I attempted to use an if statement, but it doesn't seem to be working. Anyone have any ideas on how to make this work? data(){ return { ...

javascripthtmlvue.js

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

Tips on preventing a nested loop's inner ng-repeat from updating when the array undergoes changes

My current challenge involves working with an array of events, each event has teams participating in it. Although these objects are related, they are not properties of each other. I am attempting to loop through every event and display the teams participa ...

javascripthtmlangularjsarrays

Obtain the Vertical Dimension of an HTML Element using

Recently, I developed a unique modal message window for my application. However, I am facing an issue in determining the height of the container that is inserted into the overlay. function load_custom_message(title, message) { var left = (($(window).wi ...

jqueryhtmlheight

What is the effect of SEO on the use of image width and height attributes for a responsive website

Is it true that setting inline width and height for all images is beneficial for SEO and can improve site loading speed? Here's an example: <img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" /> E ...

htmlcssperformanceseo

Adding a MySQL-PHP combination programmatically

Currently, I am working on a custom HTML page that sends data to PHP variables which are then utilized to generate customized SQL queries. function load_table($db, $old_table, $startRow, $nameColumn, $ipColumn, $addressColumn, $cityColumn, $stateColumn, $ ...

phpmysqlhtmlsql

What is the best method to display an asterisk (*) in red while using React and Material UI

In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...

javascriptcssreactjsmaterial-designmaterial-ui

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Is it possible for an HTML checkbox value to store a boolean rather than a string?

Strings are held by HTML Input values. For instance: This stores the string "yes". <input type="checkbox" name="checkThis" value="yes"> Nevertheless, for checkboxes it is sometimes beneficial if the value was a boolea ...

htmlforms

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Increase the size of a div to equal the combined width of two divs located directly below it

I need help aligning 3 divs so that the top div stretches to match the width of the bottom 2 divs combined. Here is an image showing the expected div positioning. I attempted to use display: table-row for the divs. <div id="main_div" style="display: ta ...

htmlcss

Tips for using jQuery to add or append a class to the final li element

I am currently struggling to understand why the last child of the li element is not being inserted into the last li. This module functions as a treeview, and my main objective is to add a class to the last li. Let me demonstrate with some sample code and ...

htmljquerycsslaravel