This question already has an answer here:
Why does percentage padding break my flex item?
(1 answer)
Closed 3 years ago.
.header-center {
display: flex; align-items: center;
margin-top: 1%;
}
.header-center span {
background-color: yellow;
color: #86281e;
font-weight: 600;
padding: 0% 5%;
text-align: center;
}
.header-center-line {
background-color: #86281e;
flex-grow: 1;
height: 3px;
}
<div class="header-center">
<div class="header-center-line"></div>
<span>some text</span>
<div class="header-center-line"></div>
</div>
I use the above code to display some text in the middle of the page, with horizontal lines left and right. This code seems to work fine except the fact that it breaks the two words in different lines instead of one. How can I fix this?
add display: inline-block; to .header-center-line
.header-center {
display: flex; align-items: center;
margin-top: 1%;
}
.header-center span {
background-color: yellow;
color: #86281e;
font-weight: 600;
padding: 0% 5%;
text-align: center;
}
.header-center-line {
background-color: #86281e;
flex-grow: 1;
height: 3px;
display: inline-block;
}
<div class="header-center">
<div class="header-center-line"></div>
<span>some text</span>
<div class="header-center-line"></div>
</div>
Try adding width: max-content;
Like this
.header-center span {
background-color: yellow;
color: #86281e;
font-weight: 600;
padding: 0% 5%;
text-align: center;
width: max-content;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
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;
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.
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 4 years ago.
I am having an issue with flexbox text wrapping. The <div> with display: flex; does wrap the text correctly but it's width remains on maximum instead of changing to fit the wrapped text's size.
So, here is the HTML Markup:
<div class="tagsFormSection">
<div class="tagsHolder">
<div class="labelItem">
<div class="labelContent">EMPRESA DE TESTE 3</div>
<div class="labelAditional">manager</div>
<div class="labelClose">x</div>
</div>
<div class="labelItem">
<div class="labelContent">COOBO SOLUÇÕES EM PROCUREMENT LTDA</div>
<div class="labelAditional">admin</div>
<div class="labelClose">x</div>
</div>
</div>
</div>
And the SCSS:
.tagsHolder {
display: flex;
flex-direction: row;
margin-bottom: 10px;
flex-wrap: wrap;
.labelItem {
display: flex;
margin-right: 10px;
align-items: center;
margin-top: 2px;
.labelContent,
.labelAditional {
font-weight: 600;
padding: 5px 8px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.labelContent {
color: #fff; //background-color: #666;
background-color: $gray-300;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
font-size: 0.7rem;
}
.labelAditional {
color: #444;
background-color: lighten(map-get($theme-colors, "success"), 10%);
font-size: 0.6rem;
}
.labelClose {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #fff; //background-color: #444;
background-color: $gray-400;
padding: 2px 6px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
font-weight: 700;
font-size: 0.7rem;
height: 100%;
position: relative;
box-sizing: border-box;
transition: all 0.25s ease-in-out;
&:hover {
//background-color: #555;
background-color: $gray-500;
}
}
}
}
Here is a screenshot of what is outputted:
Thanks in advance!
This question already has answers here:
A grid layout with responsive squares
(5 answers)
Closed 5 years ago.
In process of learning flexbox, and confused about having perfect CSS circles that are responsive. How do I do that? As it stands, my current code has circle1, circle2, and circle3 at 100 width, and height. I don't want to hard-code their height but rather make it responsive. Is there a way to have a perfect circle in %? So it scales each time the browser is resized?
Or are media queries the only option to fix this?
Thank you for your help.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
font-weight: 100;
}
body {
display: flex;
margin: 0;
flex-direction: column;
}
main {
display: flex;
flex: 1 0 100%;
/*for content and sidebar */
flex-direction: row;
}
/* main */
#content {
flex: 1 0 80%;
/* for header/logo and description */
display: flex;
flex-direction: column;
}
#description img {
display: block;
}
#header {
flex: 1 0 5%;
padding: 10px;
/* for test */
display: flex;
justify-content: center;
}
#test {
display: flex;
flex-direction: row;
}
#header h1 {
text-align: center;
font-size: 5em;
padding: 0;
margin: 0;
font-family: 'Satisfy', cursive;
}
h1 {
font-family: 'Satisfy', cursive;
}
#description {
flex: 1 0 10%;
padding: 30px;
display: flex;
}
#description p {
padding-left: 20px;
font-size: 20px;
}
#description img {
width: 250px;
height: 250px;
border-radius: 50%;
border: 6px solid #db6525;
border: 6px solid #00B2AC;
}
#name {
font-size: 35px;
color: #db6525;
font-family: 'Satisfy', cursive;
}
#test img {
display: inline;
vertical-align: text-top;
width: 100px;
height: 100px;
/* for the following image and description */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
#sidebar {
flex: 1 0 20%;
/* background-color: green; */
text-align: center;
line-height: 90%;
/* for sidebar contents */
display: flex;
flex-direction: column;
}
#js {
flex: 1 0 33.33333%;
/* background-color: red; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#js h1 {
font-size: 50px;
}
#forms {
flex: 1 0 33.33333%;
/* background-color: gray; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#forms h1 {
font-size: 50px;
}
#sites {
flex: 1 0 33.33333%;
/* background-color: Chartreuse; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#sites h1 {
font-size: 50px;
}
.circles {
flex: 0 0 5%;
/* for circles within */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.circle1 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle1 h1{
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle2 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle2 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle3 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle3 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
<main>
<section id="content">
<article id="header">
<section id="test">
<h1>My Website</h1>
</section>
</article>
<article id="description">
<img src='images/profilePic.png' />
<p></p>
</article>
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Contact</h1>
</div>
</article>
</section>
<section id="sidebar">
<article id="js">
<h1>Javascript</h1>
<p>Mini JS Projects</p>
<p class="subtitle">Work in progress
</article>
<article id="forms">
<h1>Free Forms</h1>
<p>Feel free to download the forms</p>
</article>
<article id="sites">
<h1>Portfolio</h1>
<p>Combination of previous work and additional sites</p>
</article>
</section>
</main>
The question now is How to have a perfect responsive css square? Because when you have a square, you will easily have a circle with border-radius: 50%. Now you can found so many solution for it in SO. Here is a nice solution with flexbox item.
.flex-container {
padding: 0;
margin: 0;
display: flex;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
flex: 1 0 auto;
border-radius: 50%;
}
.flex-item:before {
content:'';
float:left;
padding-top:100%;
}
<div class="flex-container">
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
</div>
Updated answer
I reworked the flex containers to a minimal working example. The flex-items should all be set to
flex: 1 1 auto /* flex-grow flex-shrink flex-basis */
This allows the circle h1 flex-items to grow and shrink as necessary. It might be necessary to use js to obtain the height of a circle from its expanded width when you apply the example to your code.
Hope this helps.
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.circles {
/* for circles within */
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.circle1,
.circle2,
.circle3 {
display: flex;
flex: 1 1 auto;
width: 33vw;
height: 33vw;
}
.circle1 h1,
.circle2 h1,
.circle3 h1 {
flex: 1 1 auto;
width: 100%;
height: 100%;
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius: 50%;
text-align: center;
vertical-align: middle;
}
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Content</h1>
</div>
</article>