Ensuring h1 is vertically centered while maintaining a width of 100%

Looking at the HTML code below:

<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}">
    <div class="container">
        <h1 class="intro">Some intro text.</h1>
    </div>

    <div class="arrow-holder" ng-click="scrollTo('video-container');">
        <span class="arrow"></span>
    </div>
</div>

The .section-cover div's height changes dynamically based on viewport size whenever the browser is resized. The goal is to align the <h1> element vertically inside the section-cover div. Using display: table-cell helped achieve vertical alignment but maintaining a width of 100% seems challenging. Here's an example in JSFiddle:

http://jsfiddle.net/AvrrM/

Any suggestions on how to tweak this to ensure vertical alignment of the <h1> while keeping the width at 100%?

htmlcss

Answer №1

Could this be the solution you're looking for?

http://jsfiddle.net/AvrrM/1/

.section-cover {
    position: relative;
    display: table;
    vertical-align: middle;
    width: 100%;
}

.container{
    display: table-cell;
    background: red;
    text-align: center;
    vertical-align: middle;
}

Answer №2

Why isn't this working properly? It seems that the issue lies in the use of the table-cell property, which is similar to an HTML table. To make the table-cell occupy the full width, you need to provide a container with a type of table.

View working example here

To fix this, add the following CSS code to your markup:

html, body {
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
#table {
    width: 100%;
    display:table;
    text-align:center;
}

HTML Markup

<div id="table">
<div class="section-cover dark-cyan" style="background: blue; color: white; height: 200px">

<!-- all inner html content goes here -->

</div>
</div>

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

Learn how to set up webpack or Next.js to generate a CSS file from custom Material styles and automatically inject it into the header

One of the things I've done is define some custom material styles, like this: import {createStyles, makeStyles, Theme} from '@material-ui/core/styles'; export const useStyles = makeStyles((theme: Theme) => createStyles({ fab ...

cssreactjswebpackmaterial-uinext.js

Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...

htmlcssstack

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Having an issue with jQuery. Trying to include the fixed-top class (Bootstrap 4) when scrolling, but it's not working as expected. jQuery(document).ready(function($){ var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".robig").a ...

javascriptjqueryhtmlbootstrap-4

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

What is the best way to make the sidebar occupy the entire space?

Learn about creating sticky footers using this method and check out an example here. * { margin:0; } html, body { height:100%; } #wrap { min-height:100%; height:auto !important; height:100%; margin:0 0 -47px; } #side { float:left; backgro ...

javascriptcss

What does it mean in Javascript when b1 is undefined while o1 has a value and is equal to b1?

Having some issues getting variables to work with drop down options on a page. At first, I couldn't even extract a value from the function but managed to do so by removing "var" from o1. Strange thing is, when I type o1 into the js console on chrome i ...

javascripthtmlfunctionvariables

Creating a unique identifier in JavaScript: the ultimate guide

Hi, I'm new to JavaScript and have been working hard to create a script that copies the text inside <p></p> elements. However, my current script requires different IDs for each <p></p>. Here is the code: function copyToClipboar ...

javascripthtmlscriptingdynamic-html

Styling the shadow of Bootstrap 4 tooltip arrows

Below is the arrow of the tooltip without any shadow effect: https://i.sstatic.net/8gmO1.png I've been attempting to add a shadow effect to the arrow, but due to its border-based nature, I haven't achieved the desired outcome. The current rende ...

cssbootstrap-4twitter-bootstrap-tooltip

Identifying an Ajax Request in jQuery: A Guide to Detecting when a Page is Accessed by Ajax

Currently, I am developing a dynamic website using HTML/CSS/JavaScript without any server-side scripting. Some of the content on the site is loaded dynamically through AJAX requests from external HTML files. I want to restrict access to these HTML files ...

javascriptjqueryhtml

Executing Python output in HTML with Django

I am currently working on a Django project and in the views.py file of my app, I have some outputs stored in a dictionary. The code snippet from views.py is as follows: from django.shortcuts import render def allblogs(request): a = request.GET[' ...

pythonhtmldjangopython-3.x

Convert and transfer CSS image data encoded in Base-64 to Asp.Net MVC/WebApi

Regarding the query. I successfully displayed a base-64 encoded image on the client side. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDk ...

c#cssasp.netasp.net-mvcasp.net-web-api

What is the best way to transfer a JavaScript variable through a query string from one HTML page to another?

Is there a way to pass a JavaScript variable called username from one HTML page, example1.html, to another HTML page, example2.html, using query strings? <script type="text/javascript" > $(document).ready(function() { $('#SubmitForm ...

javascriptjqueryhtmlquery-stringhref

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

In mobile view, the carousel items slide downward

When the screen is at mobile resolution, the carousel items shift downwards View image description herebootstrap carousel View image description here <div class="container"> <div id="carouselExampleCaptions" class=& ...

htmlbootstrap-4

Completes a form on a separate website which then populates information onto a different website

Creating a website that allows users to login and view various complaint forms from government websites or other sources. When a user clicks on a link to file a complaint, they will be redirected to the respective page. However, I am looking for a way to ...

javascripthtmlnode.jsformsexpress

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

CSS can only fade out without hiding afterwards

I'm struggling to create a CSS class and animation that will fade out or move a div along with its contents, resulting in the div having both display:none and visibility:hidden My attempts so far have been unsuccessful! I can either get the animation ...

htmlcss

"Debunking the traditional class assignment concept: What happens when two different classes

While working on creating a <div> element for a thumbnail gallery, I encountered a situation where I needed to apply two different classes to the <div>. One class was for positioning and the other for styling. However, when I tried to combine t ...

classcsshtml

Having problems with OS X causing issues with my CSS, any solutions to resolve this?

After creating a form and styling it with CSS, I noticed that the form appears differently on my Mac than on Windows. The elements are smaller and the colors have changed. Why is OS X affecting my CSS? Is there a solution to this issue? Here is an image s ...

cssmacosforms