Evenly distribute top and bottom padding within a fixed-height border using CSS

I'm facing a challenge with centering the content vertically on an online certificate that users can print out. The main issue lies in aligning the inner wrapper (#wrapper) inside the outer border (#outerBorder), which has a fixed height to ensure proper margin when printed.

Instead of manually calculating and hard-coding numbers, I'm exploring alternative methods for achieving vertical alignment without resorting to using a table. I tried applying "vertical-align: middle;" to the CSS for #wrapper, but it hasn't had the desired effect.

The closest solution I've come across is related to evenly distributing images vertically within a fixed-height space, as discussed in this resource: Evenly distribute images vertically within fixed-height space

If you have any suggestions or insights on how to successfully achieve centered vertical alignment between #outerBorder and #wrapper, I'd greatly appreciate your input.

Thanks! -Kristin

csspadding

Answer №1

Trying to center align elements vertically in CSS can be quite challenging.

A potential solution is including the following code in your container:

vertical-align:middle;    
display:table-cell;

Take a look at this JSFiddle demonstration

Answer №2

There are certain CSS properties that are not fully supported by print media.

One way to ensure proper printing is to wrap your styles within a @media print tag in your CSS file, like this:

@media print {
   your css
}

Alternatively, you can use an external CSS file specifically for print media:

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

Make sure to include vertical-align: middle; within the print media section to align content properly.

Another workaround would be to use percentage values based on the structure of the page:

#outerBorder{
   height :100%;
}

#wrapper{
  height:80%;
  min-height:80%;
  margin-top:10%;
}

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 best way to maximize the size of an image without causing the parent div to expand in height?

I have utilized the code below directly from the example provided at https://getbootstrap.com/docs/5.2/utilities/flex/#media-object. This code is meant to generate a box containing an image on the left and text on the right: <div class="mycard bord ...

csstwitter-bootstrapbootstrap-5

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

imagecssresponsive-designsass

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

htmlcssbordertitle

The process of retrieving CSS attributes from a control found by XPath using Selenium IDE

During my Selenium IDE script execution, I am looking to identify and handle an error state. This specific error state is visually highlighted on the page with a select control changing its background color to a light shade of red. The xpath for the selec ...

cssxpathselenium-ide

Set the navigation height to fill the entire screen

When the article section expands downwards, the left navigation bar does not extend all the way down. I want the navigation with the background color to expand downwards together with the article text on the right. I attempted to use "height: 100%;" for t ...

htmlcss

Tips for Re-positioning the Manage Password Window in a Browser Using CSS

I am facing an issue with the Caps Lock key indication on my login page. When the Caps Lock key is on, a tooltip should be displayed below the password field. However, when the browser's "manage passwords" bubbles are shown, the tooltip gets hidden be ...

javascripthtmlcssextjsbrowser

At what point does a dynamically loaded CSS file in the head section of a webpage actually

If the answer is already out there somewhere, I would really appreciate a link because I just can't seem to find it. When loading .php pages, I either include 'header.php' directly with <?php include 'header.php'; ?> or on ...

javascriptphpcss

What steps can I take to ensure that the content remains intact even after the page is

Hey there, I hope you're having a great start to the New Year! Recently, I've been working on creating a calculator using HTML, CSS, and JavaScript. One thing that's been puzzling me is how to make sure that the content in the input field do ...

javascripthtmlcss

Achieve consistent card body heights in Bootstrap 4 with the card group feature

I am working towards achieving a specific layout using Bootstrap 4's card-group feature, as shown in the image below: The goal is to have everything at the same height within each card (including card-header, card-title, and small subtext if present) ...

htmlcssflexboxbootstrap-4

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

I have a website at . When you click on a blue tab (except the middle left one), a larger tab appears with two Divs inside. What I am trying to achieve is having the sub divs show what's behind the green Div, especially while it's in motion. This ...

htmlcssbackgroundtransparency

Adjust and resize video backgrounds within parent elements on iframes

Consider the code snippet below: <div class="viewport"> <iframe src="youtube.com/blabla"></iframe> </div> Accompanied by this CSS: .viewport { height: 100vh; width: 100%; } iframe { position: absolute; } If we t ...

jqueryhtmlcssvideoiframe

Avoid displaying the div style when printing by utilizing CSS and JavaScript

How can I use Javascript and CSS to print content in a div? My main div has an id of 'preview' and the content is fetched from a database using PHP and MySQL. However, when I try to print the page, the style of the 'preview' div does no ...

javascriptphpcss

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

Why does IE make elements disappear when rotated 90 degrees in CSS3?

Why is Image 2 not visible in IE when transformed 90 degrees with some perspective? It works fine in other browsers, but IE always keeps you guessing for hours for no reason. Html : <body> <div class="scene"> <div cl ...

htmlinternet-explorercss

Enhancing OpenSeadragon images with custom overlays and managing error messages

Currently, I am experimenting with the Basic Single-Row Tile Source Collection example using the same configurations and tile sources outlined in the example. However, I am encountering difficulties in adding overlays to the first and second images as int ...

javascripthtmlcssopenseadragon

At smaller desktop resolutions, the 1px border thickness for tables may fluctuate

The border thickness of my table is inconsistent at 1px. This issue only occurs in smaller desktop breakpoints and works fine on higher resolutions. Attached below is a screenshot for reference. https://i.sstatic.net/gPsaT.png Below is the code I used to ...

htmlcsshtml-tabledatatable

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...

c#cssasp.net

Issues with adjusting the height using CSS transformations are not being resolved

There seems to be an issue with animating the height property of an element as it is not animating at all. Check out the fiddle where the animation is attempted. Here is the HTML: <ul> <li> li 1 </li> <li> ...

javascriptjquerycss

Display stylish Instagram-like dots in the slick slider

Currently, I am utilizing the slick slider to display numerous slider items. Additionally, I want to include dots to indicate the position of the items. However, there are too many dots visible at once, and I wish to display them similarly to how Instagram ...

jquerycsstwitter-bootstrapbootstrap-4slick.js

Ways to customize the background color of selected items in ion-list on Ionic

I am working on an Ionic project and I have a list of items. I am trying to change the background color of the pressed item. Can someone help me with this? index.html <ion-list> <ion-item ng-repeat="item in familleItems"> <div ng- ...

htmlcsscordovaionic-framework