Vertically aligning content

Developer
Andy Lorimer
Size
2,875 Kb
Views
34,408
  1. Vertically aligning content Previews
  2. Vertically aligning content HTML Codes
  3. Vertically aligning content CSS Codes
  4. Vertically aligning content JS Codes

How do I make an vertically aligning content?

3 methods to vertically align content without knowing the height of the parent container.. What is a vertically aligning content? How do you make a vertically aligning content? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

Vertically aligning content Previews
IQ Test

Vertically aligning content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertically aligning content</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <nav> <div class="stroke"></div> <ul> <li><a href="#1">Method 1</a></li> <li><a href="#2">Method 2</a></li> <li><a href="#3">Method 3</a></li> </ul> </nav> <section id="1"> <div class="valign-1"> <h1>Vertical Align - Method 1</h1> <p>position: relative;</p> <p>top: 50%;</p> <p>transform: translateY(-50%);</p> </div> </section> <section id="2"> <div class="valign-2"> <div class="inner"> <h1>Vertical Align - Method 2</h1> <div> <p>parent {</p> <p>display: inline-table;</p> <p>min-height: 100%;</p> <p>}</p> </div> <div> <p>child {</p> <p>display: table-cell;</p> <p>vertical-align: middle;</p> <p>}</p> </div> </div> </div> </section> <section id="3"> <div class="valign-3"> <h1>Vertical Align - Method 3</h1> <div> <p>display: flex;</p> <p>min-height: 100%;</p> <p>align-items: center;</p> <p>justify-content: center;</p> </div> </div> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vertically aligning content - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Contrail+One|Source+Code+Pro');
body { margin: 0; padding: 0; font-family: 'Contrail One';
}
#container { position: absolute; width: 100%; height: 100%;
}
nav { position: fixed; width: 100%; height: 80px; background: #fff; top: 0; z-index: 5; text-align: center;
}
.stroke { position: absolute; height: 2px; background: #9b59b6; bottom: 15%; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;
}
nav ul { margin: 0; padding: 0; list-style-type: none;
}
nav ul li { display: inline-block; padding: 0 10px;
}
nav ul li a { display: inline-block; line-height: 80px; font-size: 16px; text-decoration: none; color: #000;
}
p { display: inline-block; padding: 0 10px; text-align: center; margin: 5px 0; font-size: 18px; font-family: 'Source Code Pro'; background: rgba(255, 255, 255, .2);
}
h1,
h2,
h3,
h4 { text-align: center; margin: 0;
}
h1 { font-size: 28px; padding: 5px 0;
}
section { position: relative; width: 100%; height: 100%; background: #54CAFB; text-align: center;
}
section:nth-of-type(2n) { background: #CC69FB;
}
.valign-1 { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
.valign-2 { display: inline-table; min-height: 100%;
}
.valign-2 .inner { display: table-cell; vertical-align: middle;
}
.valign-3 { min-height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}

Vertically aligning content - Script Codes JS Codes

var link = $('nav ul li a');
var stroke = $('.stroke');
$(window).load(function() { var iniWidth = $('nav ul li:nth-child(1) a').width(); var iniPos = $('nav ul li:nth-child(1) a').offset(); $(stroke).width(iniWidth).css('left', iniPos.left);
});
$(link).on('click', function() { var target = $(this).attr('href'); var findWidth = $(this).width(); var findPos = $(this).offset(); $('html, body').animate({ scrollTop: $(target).offset().top }, 300); $(stroke).width(findWidth).css('left', findPos.left); return false;
});
Vertically aligning content - Script Codes
Vertically aligning content - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 2,875 Kb
Views 34,408
Do you need developer help for Vertically aligning content?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Lorimer (andylorimer) Script Codes
Name
Scroll down button
Password Input
Off-Canvas Menu
Interactive Button Editor
Input field - jQuery test
A Pen by Andy Lorimer
Feature Slider
More button Loader
Messing about with CSS3 animations
Sign-up Card
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!