Flexbox vertcially centered nav text
How do I make an flexbox vertcially centered nav text?
What is a flexbox vertcially centered nav text? How do you make a flexbox vertcially centered nav text? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.
Flexbox vertcially centered nav text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox vertcially centered nav text</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___raw_github_com_mr.css'> <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 "compass/css3";
// Gotta have dat border-box model
* { box-sizing: border-box;
}
// Variables
// Color variables: https://raw.github.com/mrmrs/colors/master/sass/_variables.scss
$link-color: $red;
// Resets, yo
html { height: 100%; font-size: 16px;
}
body { height: 100%; margin: 0; padding: 0; background-image: linear-gradient($white - 20, $white - 40);
}
ul { margin: 0 0 1rem; padding: 0; list-style-type: none;
}
h1 { color: $black; text-shadow: 1px 1px 0 #fff;
}
a { text-decoration: none; color: $link-color;
}
// Da styles
.container { background: #eee; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
}
.nav-list,
%nav-list { li { margin: 0; padding: 0; } a { color: $white; text-shadow: 1px 1px 0 $blue - 20; padding: 1rem 0; text-align: center; background-color: $blue; transition: 150ms linear all; }
}
.nav-list__flex-fixed-li { @extend %nav-list; display: flex; flex-direction: row; justify-content: center; li { display: flex; flex: 0 1 150px; text-align: center; flex-direction: column; align-content: stretch; align-items: stretch; &:first-child a { border-left: none; } &:last-child a { border-right: none; } } a { text-align: center; display: flex; align-items: center; justify-content: center; padding: 1rem; flex: 0 1 150px; border-left: 1px solid rgba($white, .12); border-right: 1px solid rgba($black, .15); &:hover { background-color: $blue - 10; box-shadow: inset 0 0 20px $blue - 50; border-left: 1px solid rgba($white, 0); } }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1>Vertically Centered Nav Text using Flexbox</h1> <ul class="nav-list__flex-fixed-li"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">A Much, Much, MUCH Looooonger Page Name or Navigation Title</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Vertically Centered</a></li> </ul> <small>Each <code>li</code> has a width of 100px to force the vertical growth of the long text.</small>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flexbox vertcially centered nav text - Script Codes CSS Codes
@import "compass/css3";
// Gotta have dat border-box model
* { box-sizing: border-box;
}
// Variables
// Color variables: https://raw.github.com/mrmrs/colors/master/sass/_variables.scss
$link-color: $red;
// Resets, yo
html { height: 100%; font-size: 16px;
}
body { height: 100%; margin: 0; padding: 0; background-image: linear-gradient($white - 20, $white - 40);
}
ul { margin: 0 0 1rem; padding: 0; list-style-type: none;
}
h1 { color: $black; text-shadow: 1px 1px 0 #fff;
}
a { text-decoration: none; color: $link-color;
}
// Da styles
.container { background: #eee; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
}
.nav-list,
%nav-list { li { margin: 0; padding: 0; } a { color: $white; text-shadow: 1px 1px 0 $blue - 20; padding: 1rem 0; text-align: center; background-color: $blue; transition: 150ms linear all; }
}
.nav-list__flex-fixed-li { @extend %nav-list; display: flex; flex-direction: row; justify-content: center; li { display: flex; flex: 0 1 150px; text-align: center; flex-direction: column; align-content: stretch; align-items: stretch; &:first-child a { border-left: none; } &:last-child a { border-right: none; } } a { text-align: center; display: flex; align-items: center; justify-content: center; padding: 1rem; flex: 0 1 150px; border-left: 1px solid rgba($white, .12); border-right: 1px solid rgba($black, .15); &:hover { background-color: $blue - 10; box-shadow: inset 0 0 20px $blue - 50; border-left: 1px solid rgba($white, 0); } }
}
Developer | Andy McFee |
Username | andymcfee |
Uploaded | August 09, 2022 |
Rating | 3 |
Size | 4,011 Kb |
Views | 42,504 |
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!
Name | Size |
Round Music Player with Official.fm API | 6,473 Kb |
Flip Card | 4,615 Kb |
BEM Flexbox Nav build for a workshop | 3,126 Kb |
Responsive Boxes without Images | 4,120 Kb |
Responsive Boxes with CSS3 Columns | 4,168 Kb |
CSS Loading Spinners | 3,969 Kb |
Page Transitions - Vertical Sliding | 4,943 Kb |
Pure CSS3 Toggle Switch | 3,475 Kb |
Prototyping Grid | 3,608 Kb |
Flip Card - Bad Rotation | 4,440 Kb |
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!
Name | Username | Size |
Ball physics | Blackkbot | 3,874 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Button fills | Zubfatal | 5,205 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!