Vertical Aignment

Developer
Renato Ribeiro
Size
3,397 Kb
Views
22,264
  1. Vertical Aignment Previews
  2. Vertical Aignment HTML Codes
  3. Vertical Aignment CSS Codes

How do I make an vertical aignment?

Here is a example how works the vertical alignment with transform translate property. . What is a vertical aignment? How do you make a vertical aignment? This script and codes were developed by Renato Ribeiro on 17 November 2022, Thursday.

Vertical Aignment Previews
IQ Test

Vertical Aignment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Aignment</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Raleway:100,300,400,700);
html, body { height: 100%;
}
body { font-family: 'Raleway'; font-weight: 300; background: #ecf0f1; font-smoothing: antialiased;
}
h1 { font-size: 45px; line-height: 30px; font-weight: 100; text-align: center; color: #34495e; letter-spacing: -2px;
}
h1 small { font-size: 25px; font-weight: 300; line-height: 25px; letter-spacing: 0; color: #999;
}
.outer { width: 300px; height: 300px; animation: expand 8s linear infinite; background: #34495e; margin: 0 auto; border-radius: 2px; box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}
.outer span { padding-top: 15px; width: 100%; display: inline-block; text-align: center; color: rgba(255, 255, 255, 0.3);
}
.inner { width: 120px; height: 120px; background: #e74c3c; text-align: center; line-height: 120px; border-radius: 2px; color: rgba(255, 255, 255, 0.3); box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}
.parent { position: relative;
}
.vcenter { position: absolute; top: 50%; left: 50%; transform: translatex(-50%) translatey(-50%);
}
@keyframes expand { 0%, 10%, 100% { width: 300px; height: 300px; } 20%, 30% { width: 400px; height: 400px; } 40%, 50% { width: 160px; height: 200px; } 60%, 70% { width: 330px; height: 330px; } 80%, 90% { width: 550px; height: 250px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1> <strong>Vertical</strong> Alignment<br /> <small>with css3 translate</small>
</h1>
<div class="outer parent"> <span>relative</span> <div class="inner vcenter">absolute</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Vertical Aignment - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,400,700);
html, body { height: 100%;
}
body { font-family: 'Raleway'; font-weight: 300; background: #ecf0f1; font-smoothing: antialiased;
}
h1 { font-size: 45px; line-height: 30px; font-weight: 100; text-align: center; color: #34495e; letter-spacing: -2px;
}
h1 small { font-size: 25px; font-weight: 300; line-height: 25px; letter-spacing: 0; color: #999;
}
.outer { width: 300px; height: 300px; animation: expand 8s linear infinite; background: #34495e; margin: 0 auto; border-radius: 2px; box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}
.outer span { padding-top: 15px; width: 100%; display: inline-block; text-align: center; color: rgba(255, 255, 255, 0.3);
}
.inner { width: 120px; height: 120px; background: #e74c3c; text-align: center; line-height: 120px; border-radius: 2px; color: rgba(255, 255, 255, 0.3); box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}
.parent { position: relative;
}
.vcenter { position: absolute; top: 50%; left: 50%; transform: translatex(-50%) translatey(-50%);
}
@keyframes expand { 0%, 10%, 100% { width: 300px; height: 300px; } 20%, 30% { width: 400px; height: 400px; } 40%, 50% { width: 160px; height: 200px; } 60%, 70% { width: 330px; height: 330px; } 80%, 90% { width: 550px; height: 250px; }
}
Vertical Aignment - Script Codes
Vertical Aignment - Script Codes
Home Page Home
Developer Renato Ribeiro
Username renatorib
Uploaded November 17, 2022
Rating 4.5
Size 3,397 Kb
Views 22,264
Do you need developer help for Vertical Aignment?

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!

Renato Ribeiro (renatorib) Script Codes
Name
Tinder
Tribal Wars - Box Pack 1
MacBook Pro
HTML5 Input Types
Animate.css Exemplo 2
Animate.css Exemplo 1
IOS Toggle Checkbox
PureCSS Tabs
CSS4 Validity
A Pen by Renato Ribeiro
Create amazing marketing copy 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!