I would like the lines at the bottom of each div/bottom border to align. When text on one side is longer than the other, the bottom border looks disjointed.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
A height style can be applied to the <p> element if the content inside the <p> element is not dynamic.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
p {
height: 50px;
}
<div class = "one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
You could use an absolutely-positioned pseudo element to draw the border while maintaining the 90% width of innerTxt.
Because the flex elements are stretched vertically they'll be aligned at the bottom.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
}
.one>* {
position: relative;
}
.one>*::after {
content: '';
position: absolute;
bottom: 0;
border-bottom: 2px solid blue;
display: block;
width: 90%;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>
try adding to the .inner div align-self: flex-end;
.inner{
align-self: flex-end;
}
or to the parent div :
.one {
align-items: flex-end;
}
Related
I am having trouble laying out my items in a gallery. I would like to be able to display an image in a horizontal or vertical format and have it fit within a fixed 300px x 300px box and align to the bottom of the box. I would like the "attribution" to line up with the right edge of the image. Here is a picture of the desired layout.
Picture of desired layout
This is the html:
.gallery {
display:flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
display: flex;
background: green;
}
.gallery_description {
height:auto;
width:100%;
}
.image_attribution {
display:flex;
flex-direction:column;
align-items:flex-end;
}
.image_square {
width: 100%;
height: 100%;
background: black;
display:flex;
flex-direction:column;
align-items:flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
}
.image {
height:100%;
background: green;
width:
}
.image_contain {
width: 100%;
height: 100%;
object-fit:contain;
object-position: bottom;
}
.attribution {
float:right;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I am unable to make the image fit within the box. Ive tried use "object-fit:contain" but to no avail. I would be grateful for any help you can offer.
Update: the code is almost working. The last item is to make the attribution align with edge of the image. align attribution to edge of image Here is the latest version of the code in Codepen.
https://codepen.io/acrossky/pen/KKoNdPX
Maybe something like this:
.gallery {
display: flex;
gap: 10px;
}
.gallery_item_square {
height: 450px;
width: 300px;
background: brown;
}
.gallery_square {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
background: green;
}
.gallery_description {
width: 100%;
height: auto;
}
.image_attribution {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.image_square {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.gallery_attribution {
width: 100%;
background: orange;
display: flex;
justify-content: center;
}
.image {
height: 100%;
width: 100%;
}
.image_contain {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
}
.attribution {
display: block;
}
<div class="gallery">
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8814.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
<div class="gallery_item_square">
<div class="gallery_square">
<div class="image_attribution">
<div class="image_square">
<div class="image">
<img class="image_contain" src="https://acrossky.github.io/Images/3W6A8817.jpg">
<span class="attribution"> ARC/Qedema</span>
</div>
</div>
</div>
</div>
<div class="gallery_description">
<p>This is a description</p>
</div>
</div>
</div>
I stumbled upon an issue with image centering within a flexbox with direction:column.
Imagine you have two elements within a flexbox, where the first one contains an image:
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
.image-container {
flex: 1;
align-self: center;
.img {
height: 100%;
}
}
.another-flex-child {
flex: none;
background-color: red;
}
}
I would expect the image to be center horizontally within the div, but it appears the left border of the image is exactly at the center of the div.
When I replace the image with another div which contains some text it is placed as expected.
Can anybody explain to me whats happening there?
Checkout this fiddle
Because your <div> that contains the image (and has align-self: center on it) is by default a block-level element, and has a width of 100% by default. As such, it is constrained in relation to the parent.
In order to have your image centered correctly, you'll want to add display: contents with:
container .image-container {
display: inline;
}
This can be seen in the following:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.container .image-container {
flex: 1;
align-self: center;
display: contents;
}
.container .image-container .img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
The issue is that you are using an SVG with no intrinsic dimension and only an intrinsic ratio so it's like your image has a width equal to 0 which make its centred container with a width equal to 0, too.
Here is before using height:100%
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
}
.img {
/*height: 100%;*/
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
After setting height:100% the image will fill all the space and will keep its ratio but you will have an overflow because the browser will not go back to calculate the width of the container again:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
To avoid this give the image a width and make sure to add min-height:0 to the container to allow it to shrink
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" width="250">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
If you were initially using an image with intrinsic dimension you won't have this issue and you don't need to define a width. You will only need to add min-height:0 to avoid the overflow:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/400/400">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Note that the above doesn't work the same way in Firefox and you will need to add text-aling:center to make sure it works the same everywhere:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
text-align:center;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/400/400">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
You will notice that the difference is related to the width calculation of the container which a bit complex due to the use of height:100%
Things may get worse if the size of the image is very small:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
text-align:center;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/50/50">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
In Firefox text-align:center will do nothing and you may need a nested flexbox container
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
justify-content:center;
border:2px solid blue;
display:flex;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/50/50">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
The below is almost the same issue you were having with the initial SVG that can fixed with this same code but it won't remove the overflow:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
display:flex;
justify-content:center;
border:2px solid blue;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Another intresting thing to note is that your initial code may work fine if you add height:100% to the container making the calculation of the nested height easier:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
box-sizing:border-box;
height:100%;
}
.img {
height: 100%;
display:block;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Add the justify-content like below:
.image-container {
flex: 1;
align-self: center;
justify-content:center;
}
it should works
I am using a centred div to contain an image and some text but want my title to have the same margin/alignment as the text. Right now the title is placed on the extreme left of the page and I want it to have a responsive margin on the left.
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text
</p>
</div>
<div class="col-sm" id="img">
<img style="height: 350px" src="which.png" alt="Which One">
</div>
</div>
</div>
there are two ways you could do this;
Add margin-left to the div h2 tag or add a container
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
.container-fluid h1 {
margin-left: 150px;
}
or you can over complicate it like I do and contain containers, I have added border outlines so you understand what that container is containing, if you wish to move the h1 and p text, you can margin-left them both.
.row {
max-width: 1150px;
height: auto;
border: 1px solid red;
}
.rowTextContainer {
float: left;
width: auto;
margin-left: 50px;
}
.rowText {
text-align: center;
border: 1px solid blue;
}
.row img {
width: auto;
padding-left: 20px;
}
<div class="row">
<div class="rowTextContainer">
<div class="rowText">
<h1>Title Text</h1>
<p>Text here.</p>
</div>
</div>
<img src="https://via.placeholder.com/350.png">
</div>
.row {
margin: auto;
max-width: 1150px;
display: flex;
flex-direction: column;
align-items: center;
}
.col-sm {
display: flex;
flex-direction: row;
margin-left: 10%;
}
img {
width: auto;
margin-left: 10px;
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text go ahead . . . . .
</p>
<img style="height: 350px" src="https://picsum.photos/200" alt="Which One">
</div>
</div>
</div>
I hope it will solve your problem.
I have a child div with a border that should only wrap as much as the text. However, it seems to inherit the parent div's width.
Example: https://jsfiddle.net/xstaf3cc/
<div class="contentContainer">
<div>Title</div>
<div>Posted by u/user1</div>
<div class="text">
Text
</div>
</div>
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15;
}
.text {
border: 1px solid black;
}
How can I make the width of 'Text' not inherit its parent div's width? I would like its width to just be as long as the text.
Use align-items: flex-start; style on contentContainer div
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15px;
align-items: flex-start;
}
.text {
border: 1px solid black;
}
<div>
<div class="contentContainer">
<div>
<div>Title</div>
<div>Posted by u/user1</div>
</div>
<span class="text">
Text
</span>
</div>
</div>
use width: fit-content; to .text
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15;
}
.text {
border: 1px solid black;
width: fit-content;
}
<div>
<div class="contentContainer">
<div>
<div>Title</div>
<div>Posted by u/user1</div>
</div>
<div class="text">
Text
</div>
</div>
</div>
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>