vertically centering a div specifically on laptops

What is the best way to vertically center a div on lap-tops? (...)

body {padding: 4% 16%;}
body {top:0px; left:0px; bottom:0px; right:0px;}
body {border: 12px solid darkred; border-style: double;}
body {background-color: #FAFCB4;}
p {font-size: 80%; text-align: justify;}
@media only screen and (min-width:768px) { 
/* For desktop: */
body {position: absolute;}
body {padding: 6% 18%;}
p {font-size: 100%;}
}

<div style="margin:auto; max-width:525px;">
Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

I'm looking for simple solutions to center my div vertically on laptops. Any straightforward suggestions would be greatly appreciated. Thank you!

htmlcss

Answer №1

While someone already addressed your media query inquiry, I wanted to share another approach.

An alternative method for centering elements is by utilizing positioning.

div.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Compatible with Safari and iOS */
  transform: translate(-50%, -50%);
}

You're welcome!

Answer №2

    body {
      padding: 4% 16%;
      margin-top: 40%;
      margin-bottom: auto;
      border: 12px double darkred;
      background-color: #FAFCB4;
    }

    p {
      font-size: 0.8em; /* Remember to use "em" instead of percentages*/
      text-align: justify;
    }

    @media only screen and (min-width:768px) { 
    /* For desktop: */
    body {position: absolute;
      padding: 6% 18%;
    }
    p {
      font-size: 1em;
    }
    <div style="margin:auto; max-width:525px;">
    Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

Consider using "em" for your font sizes as it provides a more flexible and user-friendly approach. When using em, you're essentially setting the font size relative to the user's preferences. More information on "em" units can be found here: (http://www.w3schools.com/cssref/css_units.asp)

You can optimize your CSS by combining multiple styles within one element, which enhances efficiency and effectiveness in styling.

Additionally, I positioned the element with a top margin of 40%. This assumes that the vertically centered element will occupy about 10-20% of the page. Adjust the percentage based on the size of your element to achieve the desired vertical alignment. By setting margin-bottom:auto;, you can automatically center the element vertically relative to the remaining space. Feel free to adjust the values until you reach your desired styling. Best of luck! ;)

Answer №3

Utilizing Flexbox in CSS3 can be done as shown below.

// Ensuring body occupies the entire viewport width and height
html {
    height: 100%;
    width: 100%;
}
// Styling for the container div, although using body is not recommended
body {
    height: 100%;
    width: 100%;
    // Transforming the container into a Flexbox
    display: -webkit-flex;
    display: flex;
    // Horizontal alignment
    justify-content: center;
    // Vertical alignment
    -webkit-align-items: center;
    align-items: center;
}

If you specifically want this layout for laptops only, enclose the CSS rules within:

// Regular Screens
@media screen
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
}

// Retina Screens
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) { 
}

Answer №4

Media Query constraints for targeting laptops have been thoroughly debated by now.

To achieve vertical alignment, an alternative approach involves utilizing CSS display properties such as table and table-cell, along with vertical-align to centrally position elements regardless of the container's height.

You can refer to this article on CSS-Tricks for more information.

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

Can variables be transmitted through Real-Time Communication in JavaScript?

Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...

javascripthtmlvariablesjsfiddlechannel

Component built in ReactJS for file uploads to a server running on Spring MVC/Data-REST

For quite some time, I have been on the lookout for a ReactJS component that enables file uploading from a browser, with the ability to save it to the server where the ReactJS application is deployed. I've come across several components that facilita ...

javascriptajaxhtmlbrowserreactjs

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

javascripthtmllinuxexpress

What is the integration of Google URL format with a PHP application?

When it comes to php websites, URLs are commonly written in the form of page.php?id=123 or rewrite moded page/Id/123 However, when looking at google I observed that URLs look more like google.com/search?q=Wordpress I attempted to structure website links ...

phphtmlurlcurl

Applying a filter within an ng-repeat loop to act as a conditional

Is it possible to use the ng-repeat as a conditional in an efficient and optimal way? I am wondering if there is a way for code to be shown only if found selected is true, without having to create a new variable in the back-end. <div ng-repeat="c ...

htmlangularjs

Delivering Background Videos with Node.JS

Apologies if my question seems off base or confusing, as I am not very knowledgeable in the world of nodejs. I have been comfortable using just plain PHP and Apache for a while until I discovered ZURB Foundation's stack with Handlebars and SASS, along ...

javascriptnode.jshtmlvideobackground

Running a series of functions consecutively with JQUERY

Currently, I am facing an issue with using an ajax method .load to replace the content of a div. The library I am working with does not allow me to replace the content of a div as some functions continue to run in the background. To overcome this challeng ...

javascriptjqueryhtmlajax

Arranging cells within a table with numerous rowspan configurations

I need some help creating a table that will be divided using rowspans for a PDF rendering with BFOreports. I have included an example layout below (numbers are just for reference): https://i.stack.imgur.com/Wbe96.png However, the output I am currently ge ...

htmlhtml-tablebfo

Cypress has the ability to exclude certain elements from its testing

How do I locate a clickable element using the cypress tool? The clickable element always contains the text "Login" and is nested inside the container div. The challenge lies in not knowing whether it's an <button>, <a>, or <input type=& ...

javascripthtmltypescripttestingcypress

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

javascripthtmlcssgetelementbyidfacebox

What are some effective strategies for avoiding empty fields showing on an email form?

My HTML form is linked to a PHP Email handler, and it's working well except for one issue. When the email is delivered, it includes all fields, even the empty ones. I want it to only display filled-in fields. I tried using an IF statement that checks ...

phphtmlformsemailsyntax

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

javascriptphpjqueryhtmljson

Ways to prevent a timeout when the score exceeds 1000

Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely. I've tried placing the clearTimeout functions before e ...

javascripthtmlcssintervals

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website: The navigation bar should remain fixed at the bottom of the window until you start scrolling. I am unsure if this can be done using just CSS, but I have made some progress ...

jqueryhtmlcss

Error: The column 'joinedactivities.searchact id = searchact.id' is not recognized in the 'on clause'

I keep encountering this particular error: Error: Unknown column 'joinedactivities.searchact id = searchact.id' in the 'on clause'. I have meticulously inspected the table names and even attempted to make modifications, but multiple err ...

phphtmlmysqlsql

Adjusting HTML5 drag height while resizing the window

Code conundrum: var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag he ...

javascriptjquerycsshtml

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

What is the best way to pass an array to PHP and then display it in HTML?

After setting up a form with 3 select tags in my HTML, I attempted to create an array using jQuery and send it to PHP. The goal is to retrieve data from PHP and display it on my HTML page. Below is the code snippet: HTML code <form name="myform"> ...

phpjqueryhtmlajax