Align a div vertically in a responsive design layout

How can I get the text inside "grid2" and "section2" to vertically align in the middle?

Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction?

I have searched for similar questions but the answers haven't been helpful.

My HTML:

<html>
<head>
    <title></title>
</head>
<body>
<div id="background">
 <div id="template">  
  <div class="grid2">
   <div class="section2">
    <h2 style="text-align: center;">New 2014 Model</h2>
    <p>Latest model forced air (with a fan) fully automatic 48 egg incubator.</p>
    <p>This new design uses a sophisticated program for automated hatching process that    produces one of the highest hatching rates of any model, yet is incredibly easy to use.  Perfect for small hatchers, self sufficient households, or families incubating in the backyard.</p>
   </div>
  </div>
</div>

<!--responsive-->

My CSS:

body {
margin:0px;
padding:0px;
} 
.clear {
clear:both;
} 
#background {
background-color:#FFFFFF; 
background-position:top;
width:100%;
max-width:1000px;
margin:auto;
} 
#template {
padding:10px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:16px;
} 
.responsive {
width:100%;
} 
.grid2 {
float: left;
width:50%;
min-width:280px;
}
.grid3 {
float: left;
width:33.3%;
min-width:280px;
} 
.grid4 {
float: left;
width:16.66%;
min-width:160px;
} 
.section4 {
padding:1px;
} 
.section3 {
padding:5px;
} 
.section2 {
padding:10px;
}
.shrinkable {
clear: both;
padding: 0px;
margin: 0px; 
text-align:center;
} 
.shrinkable img {
width:60%;
height: auto;
} 
.shrinkable p {
text-align:center;
} 
.column {
display:block;
float:left;
margin: 1% 0 1% 1.6%;
} 
.column:first-child {
margin-left: 0;
} 
.box {
width: 32.2%;
} 
.row:before,.row:after {
content:"";
display:table;
} 
.row:after {
clear:both;
}

Here is an example

Answer №1

This CSS code snippet will perfectly align text both vertically and horizontally in the center.

.grid2 {height: 100%; display:table; text-align: center}
.section2 {display: table-cell; vertical-align: middle}

Answer №2

To center align text in paragraphs, you have two options:

.center-text {
   text-align: center;
}

You can either add a CSS class to your HTML elements like this:

<p class="center-text">Latest model forced air (with a fan) fully automatic 48 egg incubator.</p>
<p class="center-text">This new design uses a sophisticated program for automated hatching process that produces one of the highest hatching rates of any model, yet is incredibly easy to use. Perfect for small hatchers, self-sufficient households, or families incubating in the backyard.</p>

Answer №3

Give this a shot and observe the results.

.grid2  {float:right; height:50%; margin-bottom:-120px;}
.section2   {clear:both; height:240px; position:relative;}

Answer №4

One effective approach to achieving responsiveness is avoiding dependency on CSS, especially when working with fluid layouts that do not have fixed heights.

A reliable method involves using jQuery to dynamically determine the height of the parent container and then aligning the content accordingly. This can be achieved by utilizing the resize function in jQuery, which ensures that the content remains centered even as the dimensions change.

You can implement a script similar to the following:

$( window ).resize(function() {
   var newHeight = $('.parentdiv').height() / 2;
   $('.child-div').css('margin-top', newHeight)
});

Keep in mind that you should take into account the size of the element being centered when performing these calculations.

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

Purchased a website design - should I go with a table structure or CSS layout?

Recently, I decided to hire a new web designer for one of my projects. After multiple attempts, he finally delivered a beautifully designed webpage by sending me 20 poorly sliced images from Photoshop and an entire HTML file with table structure. When I r ...

What is the best way to align a series of divs vertically within columns?

Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png I am looking to create multiple columns ...

Is it possible to utilize hCard for semantic markup exclusively for a business's contact information?

Can hCard be used to markup a business's contact information without including a personal name? According to the hCard guidelines, a name is required in the format (e.g. John Doe): . I am specifically trying to mark up just a business's contact d ...

Gradient Border on CSS Button

I'm trying to create a button with a silver-ish border and gradient like the one in the picture. I've managed everything except for the border, which is giving me some trouble. Here's the current CSS code I'm using for the button. http ...

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

Issue with Bootstrap 5 offcanvas when placed inside a fixed div

I am currently incorporating the bootstrap navbar with offcanvas functionality. All nested within a fixed positioned div. The styling of the div is outlined below: .whiteHeader { position: fixed; display: flex; align-items: center; height: ...

Utilize a custom endpoint for Microsoft Graph Toolkit: "Implement a domain-specific endpoint"

I'm currently following the instructions provided at this Microsoft Graph Toolkit tutorial. My code is quite straightforward, including the script reference, the mgt-msal2-provider element with my client-id specified, and a basic login component < ...

MUI useStyles/createStyles hook dilemma: Inconsistent styling across components, with styles failing to apply to some elements

I have been trying to style my MUI5 react app using the makeStyles and createStyles hooks. The root className is being styled perfectly, but I am facing an issue with styling the logoIcon. Despite multiple attempts to debug the problem, I have not been suc ...

Comparison of HTML's equivalent to LaTeX's label and ef functionality

I have a Frequently Asked Questions page coded in HTML (example) where the questions often refer to one another. This results in the numbering changing whenever we add, delete, or rearrange the questions. LaTeX provides an elegant solution to this problem ...

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

Issue with concealing floated elements within a container div

I am currently facing an issue with trying to hide floated divs within a parent div, but unfortunately my code is not working as expected. Here is the code snippet: div.scrollarea { overflow: scroll; width: 400px; ...

Tips for Minimizing DIV Space with the Flex Property

I need some help with reducing the space between the individual content (1, 2, 3, 4) and its border in this Fiddle. As a newcomer to Flexbox, I'm unsure if there's an easy solution to this issue. Here is a visual representation of what I mean: ...

Using Accordions in Jquery to dynamically adjust page height during ajax calls

I am currently using AJAX to call in a page and animate its height successfully. However, I have encountered an issue with an accordion-like function that is supposed to toggle the visibility of an element and adjust the height of the containing element ac ...

Creating a unit by merging variables in SASS

Is there a way to merge two variables in SASS to create a single unit together? The current configuration is outlined below: $font-size: 16; $font-unit: px; $base-font-size: {$font-size}{$font-unit} !default; @if unit($base-font-size) != 'px' ...

Design and execution of webpage structure

My website features a single-page layout with fixed navigation that allows users to easily navigate up and down the page using #. However, when the page loads I want it to display the second section of content instead of the top section. Is there a way to ...

Adding event listener to a dynamically created video element

Could you provide any insight as to why I'm encountering an error message "Can't create event listener on null" when using the following code: var my; my.newVidObj = document.createElement('video'); my.newVidObj.src = "vid- ...

Adding additional elements to a div in a horizontal orientation

I am currently working on a project where I need to display bars and restaurants based on specific filter criteria. I have a container div called .resultsContainer where all the results will be displayed. While I can easily append more divs (.barContainer) ...

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

What is the best way to include a JavaScript variable in an HTML image src tag?

Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...