At first, the icons and label are centred correctly. But I need to make the anchor display: inline-block; to make the clickable area the full size of the grid it is in. Only the label itself is centred, while the icon is above the label.
I tried using vertical-align: middle; and align-items: centre;.
How can I make the icon and label vertically aligned?
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#600&display=swap');
body {
display: grid;
grid-template-rows: 15% 70% 15%;
grid-auto-columns: 1fr 1fr;
gap: 0% 0%;
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
background-color: rgb(224, 224, 224);
height: 100vh;
}
#header {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "back welcome logout";
grid-area: 1 / 1 / 2 / 2;
position: fixed;
width: 100%;
height: 15%;
background-color: rgb(255, 255, 255);
align-items: center;
text-align: center;
}
#back {
grid-area: back;
}
#welcome {
grid-area: welcome;
}
#logout {
grid-area: logout;
}
#content {
grid-area: 2 / 1 / 3 / 2;
}
#footer {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "home contact";
grid-area: 3 / 1 / 4 / 2;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
height: 15%;
background-color: rgb(255, 255, 255);
}
#home {
grid-area: home;
}
#contact {
grid-area: contact;
}
/* centre alignment for icon and label */
#back,
#logout,
#home,
#contact {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(58, 58, 255);
display: inline-block;
width: 100%;
height: 100%;
}
/* clickable size for icon and label */
#header a,
#header span,
#footer a,
#footer span {
font-size: 1.5em;
text-decoration: none;
}
/* hover for icon and label */
#header a:hover,
#footer a:hover {
background-color: rgb(216, 237, 255);
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
</head>
<body>
<div id="header">
<a href="#" id="back">
<span class="material-symbols-outlined">
arrow_back
</span><br/> Back
</a>
<h1 id="welcome">Timeline</h1>
<a href="#" id="logout">
<span class="material-symbols-outlined">
logout
</span><br/> Logout
</a>
</div>
<div id="content">
<p>hello</p>
</div>
<div id="footer">
<a href="#" id="home">
<span class="material-symbols-outlined">
home
</span><br> Home
</a>
<a href="#" id="contact">
<span class="material-symbols-outlined">
chat
</span><br> Contact
</a>
</div>
</body>
</html>
You should use flexbox when it comes to alignment of items. It's easy to use, and super useful when you completely control it.
You should take a look at the documentation here
First, you need to correct the HTML structure of the <a>s.
Remove the <br> tags and put the labels in their own <span>s.
<a href="#" id="home">
<span class="material-symbols-outlined">
home
</span>
<span>Home</span>
</a>
Now their styling is easier. The following properties are what you need to set for the links' rule:
Change display: inline-block to display: flex.
display: flex will make the <a>s hold the <span>s in a responsive container while assuming a block level element role that sits nicely in the width computed for it.
flex-direction: column will stack the <span>s vertically.
justify-content: center to center items vertically.
In vertical placement (i.e flex-direction: column), the align-items and justify-content properties get swapped because you are changing the main axis from horizontal to vertical. For this, we use justify-content: center rather than align-items: center to center the items vertically.
You may get rid of the other properties as they are not necessary and introduce problems and unneeded complexity.
The new rule set:
#back,
#logout,
#home,
#contact {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
color: rgb(58, 58, 255);
border: 1px solid;
}
Because the icons and labels are now in different <spans>, you can style them to take up full width and derive their height from their own content like this:
#back span,
#logout span,
#home span,
#contact span {
display: block;
width: 100%;
height: auto;
}
I also noticed that your header bar would change its height, getting shorter with screen resize while I opened dev tools, so you may correct this by setting a fixed height rather than a percentage height.
#header {
...
height: 100px;
...
}
Personally, I prefer to use flex when it is about trying to align vertically. Here you have an example on how to use it:
div {
margin-bottom: 10px
}
.vertical {
display: flex;
align-items: center;
height: 175px;
width: 175px;
background-color: yellow;
}
.horizontal {
display: flex;
justify-content: center;
height: 175px;
width: 175px;
background-color: red;
}
.both {
display: flex;
justify-content: center;
align-items: center;
height: 175px;
width: 175px;
background-color: blue;
color: white;
}
<div class="vertical">
vertical
</div>
<div class="horizontal">
horizontal
</div>
<div class="both">
horizontal and vertical
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I have a problem with my navbar. I want to make a fully responsive website. For now, everything besides the navbar works. When I try to stretch the website, the content below the navbar stays at the center, but the navbar is moving to the left. I also want my navbar to be "fixed" and scroll with the page. I would like to see the logo to the left and menu items to the right, but not sure how can I do that. Can you help?
Talking about that page: https://fajferekpl.github.io/fjfr/
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.site-nav {
width: 100%;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
grid-column: 1/4;
grid-row: 1;
color: var(--first-color);
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<nav class="site-nav grid" id="header">
<div>.fjfr()</div>
<div class="nav-menu">
<ul>
<li>.home()</li>
<li>.about()</li>
<li>.portfolio()</li>
<li>.skills()</li>
<li>.contact()</li>
<li class="icon-navbar"><i class="fab fa-github"></i></li>
<li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun"></li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>
I used position: relative; on your .site-nav class to center the menu contents. Because a position: fixed; works similarly to absolute you can set top and left styles to align your fixed header into the center also.
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.site-nav {
width: 100%;
position: relative; /* Center navbar */
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
grid-column: 1/4;
grid-row: 1;
color: var(--first-color);
padding: 20px;
}
/* Fixed navbar on scroll changes */
.site-nav-colored {
width: 100%;
top: 0;
left: 22vw;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 4px var(--first-color);
}
<nav class="site-nav grid" id="header">
<div>.fjfr()</div>
<div class="nav-menu">
<ul>
<li>.home()</li>
<li>.about()</li>
<li>.portfolio()</li>
<li>.skills()</li>
<li>.contact()</li>
<li class="icon-navbar"><i class="fab fa-github"></i></li>
<li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun"></li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>
I believe it is just a positioning & width issue. I centered it with the following...
With fixed positioning, you have to be sure to tell it where to be positioned. Positioning it 50% from the left (aka 50% to the right), but then adding a transform: translate back 50% (aka another 50% to the left) will center it. This is because it moved it 50% from the far left corner of the navbar (not from the center of it), and then you have to move it 50% backward to make it true center.
.site-nav-colored {
width: 100%;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 4px
var(--first-color);
left: 50%;
transform: translate(-50%);
}
Also, the width of the nav bar is being affected by this section. It can only go up to 1060px.
media screen and (min-width: 950px)
.grid {
width: 100%;
max-width: 1060px;
margin: 0 auto;
}
So, if you want it to extend the full width of the screen then the nav would have to be outside of the div with class="grid" in your HTML.
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
My website will have information on the temperature and I am hoping to have a read out of temperature followed by a degree sign and either 'C' or 'F'. There is other information on the page about the weather, so I am using CSS grid to layout the page and break all of the sections up. When I make the degree note font size smaller, the degree moves higher on the page. I would like it to be aligned with the temperature value, but I can't figure out whats going on in the page. Any assistance would be amazing.
Photograph of the problematic text:
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>° C</h2>
</div>
</div>
Use CSS flex-box instead.
It's much more flexible and responsive than CSS grid.
Just run the code snippet you'll see.
.wrapper {
display: flex;
flex-direction: column;
padding-bottom: 2.5em;
}
.temp {
align-items: center;
display: flex;
font-size: 3em;
padding: none;
}
.temp-symbol {
align-self: flex-start;
font-size: 30px;
}
<div class="wrapper">
<img class='loading-text' alt="your image" src='img/weather-app-loading.png'>
<h2 class='temp'>
<span class='temp-number'>34</span>
<span class='temp-symbol'>° C</span>
</h2>
</div>
H2 tag will break line. Use instead span tag to add a specific class to text.
.wrapper {
display:grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp{
position: relative;
display:grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
position: absolute;
top: 1rem;
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'></img>
<div class='temp'>
<h2>
<span class='temp-degree'>34</span>
<span class='degree-note'>° C</span>
</h2>
</div>
</div>
Headings normally come with default margins. Remove those margins from your h2 elements. That should get you where you want to go.
Then, for more precision, set an equal line height for the content.
Add this to your code:
.temp {
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right; /* optional; eliminates gap between elements */
}
.degree-note {
margin: 0; /* remove default margin */
}
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
font-size: 3em;
align-content: center;
justify-content: center;
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right;
}
.degree-note {
font-size: 30px;
margin: 0; /* remove default margin */
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>° C</h2>
</div>
</div>
Hey so I'm trying to have black borders in between each tab at the top of my page (shown below), however when I try to add border-left: ; it adds it to the text in the cell rather than the cell itself.
I have tried adding:
height: 100%;
width: 100%;
but this messes with the text inside as well.
This is where I would want the border to be:
and this is where I would want the text to be:
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #70614b;
}
.banner {
display: grid;
z-index: 1;
position: fixed;
width: auto;
height: 90px;
background-color: #d7cdc7;
grid-template: 100% / 20% repeat(5, 1fr);
grid-gap: 2px;
justify-items: center;
align-items: center;
}
.logo img {
width: 100%;
height: auto;
}
.about {
grid-area: 1 / 2 / span 1 / span 1;
}
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
}
<html>
<head>
<link href="./style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="logo"><img src="./photos/aa logo.png" /></div>
<div class="about tabs">ABOUT</div>
</div>
</body>
</html>
Without modifying your stylesheet too much, I'd suggest giving your tabs selector the height of its parent and then aligning the text using flex. It should look like this:
.tabs {
font-family: Roboto;
font-size: 40px;
font-weight: bold;
text-align: center;
border-left: 2px black solid;
height: 100%;
display: flex;
align-items: center;
}
Hope it helps!
I have multiple menu items that are displayed horizontally. In each menu item I have a span icon (data-icon) and a text. They are centered with text-align:center. Some menu item texts are long. Everything is OK until I get into smaller screens.
The problem is that when the text breaks to the next line it gets centered inside the menu item container and goes under the icon.
Is there a way to prevent and center item text by itself but also leave Icon and Text centered inside the menu container ?
.mycontainer {
width: 50%;
background: green;
text-align: center;
float: left;
}
.big-icon {
font-size: 40px;
}
.small-text {
font-size: 12px;
position: relative;
top: -15px;
}
<div class="menu">
<div class="mycontainer">
<span class="big-icon">Big Icon</span>
<span class="small-text">This is very very very very very very very very very long text</span>
</div>
<div class="mycontainer" style="background: yellow;">
<span class="big-icon">Big Icon</span>
<span class="small-text">This is short text</span>
</div>
</div>
Try to use Flexbox
Stack Snippet
.menu {
display: flex;
flex-wrap: wrap;
}
.mycontainer {
padding: 20px;
box-sizing: border-box;
width: 50%;
background: green;
text-align: center;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
.big-icon {
font-size: 40px;
flex-shrink: 0;
}
.small-text {
font-size: 12px;
position: relative;
flex: 0 1 40%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="menu">
<div class="mycontainer">
<span class="fa fa-address-book-o fa-4x"></span>
<span class="small-text">This is very very very very veryveryveryveryverylongtext</span>
</div>
<div class="mycontainer" style="background: yellow;">
<span class="fa fa-address-book-o fa-4x"></span>
<span class="small-text">This is short text</span>
</div>
</div>
You could use css grids to make this a lot easier.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
p {
grid-column: 3/5;
}
h1 {
grid-column: 1/3;
}
.menu {
display: grid
}
.mycontainer {
display: grid;
grid-gap: 10px; // adds padding to columns
grid-template-columns: 1fr 1fr; //defines two columns (1/2 each)
align-items: center; //Centers children vertically
justify-items: center; //Centers children horizontally
background: green
}
.big-icon {
font-size: 40px
}
.small-text {
font-size: 12px
}
Here is JSFiddle: jsfiddle
More here: Alligator io aligment tutorial