I need to align text near an icon to middle.
See the admin word near the user icon in this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
I have this css, but it's not taking affect:
.HeaderToolbar {
background-color: black;
color: white;
fill: white;
width: 100%;
margin: 0 auto;
align-items: baseline;
vertical-align: middle;
/*white-space: nowrap;*/
}
I would suggest you to use elements like header, nav and div for layout along with flexbox instead of going for table to layout your header.
Please check following code. It shows basic mark up for header component with navigation and logo.
header {
width: 100vw;
height: 54px;
}
.header {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 8px;
}
.logo {
flex: 1;
}
nav {
flex: 2;
display: flex;
justify-content: flex-end;
}
button {
padding: 8px 12px;
color: white;
border: none;
cursor: pointer;
}
.ghost {
color: black;
background: transparent;
}
<header>
<div class='header'>
<div class="logo">
<h2>Logo</h2>
</div>
<nav>
<button>Projects</button>
<button>Projects</button>
<button class='ghost'>Admin 😳</button>
<button>Profile</button>
</nav>
</div>
</header>
You need to add a class to your element and then add a css to your class:
display: flex;
justify-content: flex-start;
align-items: center;
Related
I am trying to make a fluid flex field where if there is no enough space then it should drop to next line. As you can see in this example if you decrease the size of the field it doesnt drop to next line because I am using flex.
.container {
width: 80%;
border: 2px solid #ddd;
padding: 20px;
display: flex;
overflow: hidden;
}
.container .panel {
flex: none;
}
.container .panel-info {
display: flex;
align-items: center;
}
.container .panel-info .dot {
background-color: #ccc;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 8px;
}
<div class="container">
<div class="panel">Some Long Info</div>
<div class="panel-info">
<div class="dot"></div>
<div class="info">Information</div>
</div>
</div>
Use flex-wrap: wrap.
More information on MDN about the flex-wrap property
Here is small codepen example of problem.
https://codepen.io/artyor/pen/OJMrXMX
<div class="wrap">
<a>Row One</a>
<a>Row Two</a>
<a>Problematic Row</a>
<a>Row Four</a>
<a>Row Five</a>
</div>
<style>
body{
margin: 0;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width: 200px;
height: auto;
background: silver;
font-size: 30px;
/* problem*/
display: flex;
flex-direction: column;
align-items: center;
}
.wrap > a{
border: 1px solid red;
}
</style>
Once the text in tag is too long, it line-breaks, which is normal and what I want.
But when that happens it puts only that item out of the flow, it's not centered anymore, and even if I somehow make it centered, it still takes full width of container(.wrap).
How do I make it act like other tags?
Does this provide an answer for you?
body{
margin: 0;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width: 150px;
max-width: 150px;
height: auto;
background: silver;
font-size: 30px;
/* problem*/
display: flex;
flex-direction: column;
align-items: center;
}
.wrap > a{
width: 150px;
border: 1px solid red;
text-align:center;
}
<div class="wrap">
<a>Row One</a>
<a>Row Two</a>
<a>Problematic Row</a>
<a>Row Four</a>
<a>Row Five</a>
</div>
I just inserted these properties in .wrap class:
max-width: 150px to set the maximum value achievable for the elements width;
text-align: center to make the text aligned at the center horizontally.
Also I changed the values of .wrap > a width to 150px, to make the example the most clear possible.
I was trying to make the homepage layout for a project that I'm doing with the help of a course and they SCSS to style their Reactjs. But the layout isn't the same to the one in the course even after using the exact same styling. So, please help me out.
Thanks in advance.
Expected :
Result :
Here's the styling :
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}
Here's the code :
<div className='homepage'>
<div className='directory-menu'>
<div className= 'menu-item'>
<div className='content'>
<h1 className='title'>HATS</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
</div>
.
.
.
.
</div>
What you have works. It's a dynamic layout so your viewing width effects it; resize the browser and you'll see:
https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss
I am new to using flexbox to position items within a css grid layout. The grid layout is three large cells 10%, 35% and 55% of viewport. In the second grid cell (marked "b"), I use flexbox to position a header and a subheader.
My problem is that I am not able to accurately position the header and subheader within the grid cell "b". Also, the header is takes up too much space in the vertical direction, thereby pushing the subheader too low.
Here is the html code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Welcome to Project</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="site">
<div class="grid">
<div class="a">
<div class="a_left">
<div>Logo for Project</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</div>
<div class="b">
<div class="b_left">
<h1>This is the main header, it's longer than the subheader</h1>
</div>
<div class="b2_left">
<h3>This is the subheader</h3>
</div>
</div>
<div class="c">
<h2>This is grid-template-row c</h2>
</div>
</div>
</body>
</html>
Here is the css code:
#charset "utf-8";
body{
background-color: black;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 10% 35% 55%;
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
}
.a{
display: grid;
background-color: lightgray;
font-family: sans-serif;
color: green;
font-size: 16pt;
}
.a_left{
display: flex;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: space-between;
}
.a_right{
display: flex;
height: 100%;
flex-wrap: nowrap;
justify-content: right;
vertical-align: right;
}
.b{
display: grid;
background-color: white;
font-family: sans-serif;
color: blue;
font-size: 16pt;
}
.b_left{
display: flex;
flex-flow: row;
flex-grow: 0;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: left;
height: 0px;
max-height: 0px;
flex-direction: row;
align-items: flex-start;
}
.b2_left{
display: flex;
flex-flow: row;
flex-grow: 0;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: left; /*space-between*/
height: 0px;
max-height: 0px;
flex-direction: row;
align-items: flex-start;
}
.c{
display: grid;
background-color: black;
font-family: sans-serif;
color: black;
font-size: 16pt;
}
li {
display: inline;
}
site-nav{
margin-top: 0px;
}
.topnav {
align-content: right;
justify-content: center;
overflow: hidden;
background-color: #333;
height: 100%
}
.topnav a {
float: left;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
h1{
color: blue; /*deepskyblue;*/
font-family: sans-serif;
font-size: 28pt;
text-indent: 30px;
height: 0vh; /*0px*/
width: auto;
}
h2{
color: lightgray; /*deepskyblue;*/
font-family: sans-serif;
font-size: 12pt;
text-indent: 12px;
}
h3{
color: gray;
font-family: sans-serif;
font-size: 18pt;
text-indent: 85px;
}
a:link { color: green; }
a:visited { color: blue; }
a:hover { color:red; }
.site{
max-width: 100%;
max-height: 100%;
display: grid;
}
My questions are: (1) how can I precisely position the starting point of each of the header (within b_left) and subheader (within b2_left), and (2) how do I set the max height for the flex container that holds each of the two.
I have done a lot of research on this, and I have mixed and matched properties, but flexbox and grid both have a lot of properties and I still haven't found the right combo.
Thanks very much for any help.
EDIT: one possibility is to use position: absolute for each, and on the subheader set top: 150px, but I hope there is any way to do this without absolute positioning.
(1) how can I precisely position the starting point of each of the header (within b_left) and subheader (within b2_left:
The starting point is given with the properties of justify-content (start, between, end).
Second, I dont get it correctly, do you want to position the header above the subheader with flexbox?
If yes, maybe you want to set flex-direction: column; because this put all elements inside one above another.
In this link you can find more information about justify-content an its posible values
how do I set the max height for the flex container that holds each of the two.
I'm not sure if flexbox admit max height configuration, because its height is calculated depending on container's size.
Hope this can help you.
I just want to align two divs next to each other and aligning the content vertically middle in each. Any help could save my mental health. Here is my code:
.main-kozossegitag-container {
display: block;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: inline-block;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
As you see the two divs are next to each other, but I can not align the text vertically in the middle :(
.main-kozossegitag-container {
display: table;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: table-cell;
vertical-align : middle;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
I added display : table; to your main container (main-kozossegitag-text1) and display : table-cell; vertical-align : middle to your both sub-div. Those properties let them have the same behaviour as a table and cells that contains vertically aligned content. I just messed up with some left/right margin but the rest seems to work.
Add Vertical-align to the second Div.
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
vertical-align: middle;
}
Please see my fiddle here.
I used CSS3 flex-box model. I changed properties for these classes:
.main-kozossegitag-container {
display: flex;
align-items: stretch;
flex-flow: row wrap;
width: 100%;
height: 100%;
border: 1px solid red;
}
.main-kozossegitag-text1 {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
box-sizing: border-box;
width: 60%;
padding-right: 20px;
}
More on CSS3 flex-box here.
Just add a float-left to this div :
.main-kozossegitag-text1{
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
float: left;
}