I am trying to center text inside a parent element of limited width. However the text is set in a large font, which might cause a line-break. However the element line-break does not decrease the width of the element. Is there a way to center a text inside a parent wrapper if the text does not fit?
You can find a failing example in the stack-overflow code sample. The top box has a line-break and should still be centered.
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
Just add the text-align: center;
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
/* text-align: center; */
width: 300px;
height: 200px;
border: 1px solid green;
}
.box > * {
flex: 0 0 50%;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
You can use width:min-content; with the first child (https://caniuse.com/#feat=intrinsic-width)
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) h3 {
width:-webkit-min-content;
width:-moz-min-content;
width:min-content;
border:1px solid;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box">
<h3>Loreme Ipsum</h3>
</div>
<div class="box">
<h3>Lorem Ipsum</h3>
</div>
</div>
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 have three elements currently vertically centered in a container through flex:
<div class="parent">
<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>
</div>
with CSS:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 800px;
}
Looking like:
I would like to change it so the first element is vertically centered and the other elements follow:
Ideally this could be done simply through flex but so far I cannot find a solution. Any help greatly appreciated.
If your elements have a fixed size, you could accomplish this with a wrapping div
which size is the same as the first element and let the following elements just overflow.
.parent {
height: 125px;
background-color: palegreen;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item-container,
.item {
width: 200px;
height: 30px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.second {
height: 50px;
}
<div class="parent">
<div class="item-container">
<div class="item first">A</div>
<div class="item second">B</div>
<div class="item third">C</div>
</div>
</div>
If you can change the HTML structure, it's possible: Put the second and third elements into a wrapper DIV and put that one into the first. Then center the first one (not necessarily with flex - see below) and apply position: relative to it, and apply position: absolute and according position settings to the wrapper. For details see the snippet below.
.parent {
height: 500px;
border: 1px solid blue;
}
.first {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
ADDITION: Actually it's also possible with flex:
.parent {
height: 500px;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first {
position:relative;
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
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>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What's the best way to shrink-wrap a div using flex-box?
In the snippet below, I have a wrapper (the green border) shrink-wrapping the content (red & blue boxes) on all sides but the bottom.
How can I get this accomplished?
Here's a plunker demo: https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
you can use :
align-items
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
/*margin:0 auto auto*/
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
or margin
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
/* align-items:flex-start;*/
}
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
a reminder/titorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the align-items: flex-start; property on .container2
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items: flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
http://codepen.io/anon/pen/OMLLwB
#news {
width: 85%;
margin: 0 auto;
}
#news ul {
list-style: none;
margin: 0;
padding: 0;
}
#worldMap img {
width: 100%;
}
.newspiece {
margin-bottom: 2.5%;
padding: 20px;
background-color: #90C3D4;
height: 130px;
}
.newspiece h3 {
border-bottom: 3px solid black;
margin-bottom: 10px;
}
#media(min-width: 600px) {
.newspiece {
width: 25%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.newspiece:first-child {
margin-left:0;
}
}
Am i missing something here? the width the total container (#news) is 85%, the width of each item is 25%, and two of them have a 5% left margin, total sums to 85%, then why do i resize it, the rightmost column goes down?
i have changed your html/css. this is a cleaner solution and is suported among all browsers
html:
<div class="flex">
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
<div class="box">
<h3>Title</h3>
<img src="http://www.placecage.com/400/300" alt="">
</div>
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
</div>
css:
.flex {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 300px;
margin: 10px;
padding: 20px;
background: #90C3D4;
}
.box h3 {
padding-bottom: 5px;
border-bottom: 3px solid black;
}
.box img {
max-width: 100%;
}
* { box-sizing: border-box; }
The padding adds to the total width of the element if box-sizing: border-box is not used.