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
Related
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>
I am building a grid layout based on 3 rows and I would like the middle row to take as much space as possible.
The first row should be at the start of the screen (blue bar in the code example) and the third row should be at the end of the screen(red bar in the code example)
How can I achieve this? :S
https://jsfiddle.net/xmghkLvs/31/
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.
2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content auto min-content;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
Try using 100vh
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
height: 100vh;
}
and add specific height for the .top-bar abd .bottom-bar
You could approach this using Flexbox and 100vh as show below.
.grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.top-bar{
display: flex;
height: 20%;
}
.main-menu{
display: flex;
align-items: center;
justify-content: center;
height: 60%;
}
.main-menu button {
height: 60px;
width: 120px;
}
.bottom-bar{
display: flex;
align-items: center;
justify-content: center;
height: 20%;
}
I have a problem with how i am supposed to center my text in the middle of the box and get my number (01, 02 etc) in the top left corner?
I am using flexbox to first center all my contents and then align-self my heading to flex start. All fine and dandy but as you can see my heading is not in the top right corner. How would i make sure the heading is in the top left corner and my text is in the center of the box and not slightly off center?
I have tried to set margin right on auto to push the heading to the left, it works but my text is then pushed all the way to the right.
How would I go ahead of fixing this?
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
min-height: 354.48px;
max-height: 354.48px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O1 h2 {
align-self: flex-start;
}
.O2 {
background-color: #e7e7e7;
}
.O2 h2 {
align-self: flex-start;
}
.O3 {
background-color: #fff;
}
.O3 h2 {
align-self: flex-start;
}
.O4 {
background-color: #f17949;
}
.O4 h2 {
align-self: flex-start;
}
.O5 {
background-color: #fff;
}
.O5 h2 {
align-self: flex-start;
}
<footer>
<div class="box how-it-works">
<h1>How it works?</h1>
</div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
You could do something like this:
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
position: relative;
min-height: 354.48px;
max-height: 354.48px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
line-height: 0;
position: absolute;
top: 1rem;
left: 1rem;
}
.box p {
text-align: center;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O2 {
background-color: #e7e7e7;
}
.O3 {
background-color: #fff;
}
.O4 {
background-color: #f17949;
}
.O5 {
background-color: #fff;
}
<footer>
<div class="box how-it-works"><h1>How it works?</h1></div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
If I understood well what you need, one solution could be adding this to .box class:
.box{
flex-direction: column;
}
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>
I'm using Flexbox to display various content in a panel. At the bottom of each panel is a list of icons.
This is easier to visualise in this Codepen Demo
And snippet..
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
}
.ideal {
position: absolute;
bottom: 20px;
right: -44px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}
<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
<div class="ideal"><span>ICON4</span>< ideal position</div>
</div>
Currently, icon 4 wraps around and goes to the top of its container, lining up with icon 1. I would like to move the 4th icon to the bottom, so it lines up with icon 3 (ideal position seen in green)
The code works great in the desktop view, so ideally I'd like a CSS style I can apply with a media query, as opposed to changing the HTML structure.
I'm new enough to flexbox, is there a rule I could apply to icon 4 that will force it to the bottom of the container?
Any help much appreciated!
Add margin-top: auto to four and throw in justify-content: space-around for the more element.
See demo below:
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
justify-content: space-around;
}
.four {
margin-top: auto;
}
<div class="wrapper">
<div class="image">
<img src="http://placehold.it/150x68" alt="" />
</div>
<div class="row">
<span>Text content</span>
<span>Text content</span>
<span>Text content</span>
<div class="more">
<span class="one">ICON1
</span>
<span class="two">ICON2</span>
<span class="three">ICON3</span>
<span class="four">ICON4</span>
</div>
</div>
</div>