I need to make "flex-container > div4" vertically overlap and/or horizontally align with "flex-container > div2".
Need div2 & div4 to be perfectly centered.
I used text-align to center div2 but div4 is an image.
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: blue;
}
.flex-container > div {
background-color: #ffffff;
margin-top: auto;
margin-right: auto;
flex-shrink: 0;
height: 35px;
min-width: 150px;
max-width: 150px;
text-align: left;
line-height: 50px;
font-size: 30px;
}
.flex-container > div2 {
background-color: #ffffff;
flex-shrink: 0;
margin-top: auto;
height: 50px;
width: 250px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
.flex-container > div3 {
margin-top: auto;
margin-left: auto;
width: 150px;
height: 35px;
text-align: center;
line-height: 50px;
font-size: 15px;
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start;
background-color: white;
}
.flex-container > divspacer {
background-color: #ffffff;
width: 33%;
height: 35px;
margin: 1px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
.flex-container > div4 {
margin-left: auto;
background-color: #ffffff;
text-align: center;
}
<div class="flex-container">
<div><img src="https://oakandrocks.com/wp-content/uploads/2019/04/perfootersmol.png"></div>
<div2>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/onr"> Webmasters |</a>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/terms"> Terms & Conditions | </a>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/privacy"> Privacy Policy </a>
</div2>
<div3><a style="text-decoration: none" href="https://oakandrocks.com/">© 2019 Oak & Rocks</a></div3>
</div>
<div class="flex-container"><div4><img src="https://oakandrocks.com/wp-content/uploads/2019/04/footertxt.png"></div4></div>
So, to conclude, maybe not an overlap, but I need div4 (website solutions png) to be perfectly centered and bottom of the page (maybe ~1px vertical margin)
FIXED:
.flexcontainer > div4 {
display: block;
margin-left: auto;
margin-right: auto;
}
Right after posting the question, as usual, I figured a fix.
adding:
.flexcontainer > div4 {
display: block;
margin-left: auto;
margin-right: auto;
}
Related
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
I have met some problems while doing a image-viewer project. The problem is that my buttons and the image are not following justify-content property, which they don't distributed equally inside my div block, how could it be solved? Also the image is not centered as the title does despite I set the align item property. I dow know how to fix that. I've searched over the website for solutions but none of them seems working.
Could anyone help me, please? Thanks in advance.
Here are the html and css code:
<div class="image-viewer__container">
<div class="image-viewer__title">Image Viewer</div>
<div class="image-viewer__main">
<div class="image-viewer__button"><img src="./images/back.png" id="previous" /></div>
<div class="image-viewer__display" style="background-image: url(./images/loading.gif);background-repeat: no-repeat; background-position: center;">
<img src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" id="display">
<div class="image-viewer__display-source-wrapper">
<span><a href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" target="_blank">
https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
</span>
</div>
</div>
<div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
</div>
</div>
.image-viewer__container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.image-viewer__title {
font-size: 5rem;
font-weight: 600;
color: #615dec;
margin: 0;
margin-top: 2rem;
}
.image-viewer__main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
}
.image-viewer__button {
display: inline;
background: none;
border: none;
border-radius: 50%;
}
.image-viewer__button img {
width: 80px;
height: 80px;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
}
.image-viewer__display {
position: relative;
padding: 15px;
margin: 3rem;
max-width: 80rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
font-size: 0.6rem;
}
.image-viewer__display-source-wrapper {
position: absolute;
font-size: 12px;
left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
min-width: 100em;
text-align: center;
bottom: 0;
}
#display {
object-fit: contain;
width: 50rem;
height: 30rem;
margin-bottom: 1rem;
}
#source {
display: inline;
color: black;
}
This is because you've set a fixed width to your image. By setting the main image to 100% the image will fit and fill up the remaining space so the 3 elements are always distributed equally.
main image size = full width - both your arrows
current
#display {
object-fit: contain;
width: 50rem; /*fixed width*/
height: 30rem; /*fixed width*/
margin-bottom: 1rem;
}
amended
#display {
margin-bottom: 1rem;
width: 100%; /*was added*/
height: auto; /*was added*/
}
jsFiddle
Add css float:"right" in css button.
I have the following layout where I am using position: sticky to place an image near the bottom right corner of the page (below a flex layout):
.footer-logo {position: sticky; bottom: 50px; z-index: 100; margin: 50px; padding: 25px; width: 100px; height: 100px; background-color: green; float: right;}
.flex-container {height: 400px; display: flex; flex-wrap: wrap; background-color: #f2f2f2; padding-top:20px; justify-content: center;}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100"></img>
The img sticks in the correct position, but below the flex-container there is whitespace which spans the full width of the page and is the same height as the img (including padding & margin).
How do I not display this whitespace whilst still retaining the correct positioning of the img?
You can remove it using negative margin equal to the height. That space is the space of the image since position:sticky will keep the element part of the flow:
.footer-logo {
position: sticky;
bottom: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
justify-content: center;
margin-bottom: -150px;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100">
You can use this code
body {
margin: 0;
}
.footer-logo {
position: sticky;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />
I realised that I just needed to use position: fixed with bottom and right also set:
body {
margin: 0;
}
.footer-logo {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />
I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.
I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 5vw;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
You can use margin:auto to get this fixed.
Add a class .center-items to the parent a tag of the image with the following properties :
.center-items > img,p {
display : block;
margin : auto ;
}
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 50px;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
.center-items > img,p {
display : block;
margin : auto ;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#" class="center-items">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
it may work.. plz modify the css code..
css
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behaviour on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu-card {
margin: 0px;
text-align: center;
}
Thanks to #TheVigilant for putting me on the right path:
.menu-icon-container a {
width: auto;
vertical-align: top;
display: inline-flex;
justify-content : center;
}
.menu-icon-container > img, p {
margin: auto;
display: block;
}
simple question, I'm doing something wrong, but didn't get what the problem here. I want to make images clickable as it was links, but this isn't working properly, with the link staying in the middle only, not staying the full image as I want. Someone could help?
<div>
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="/file/general/imageItemCategoria.jpg" />
</a>
</div>
</li>
</ul>
</div>
And here's my css:
div{
display: inline;
font-weight: bold;
text-align: center;
ul{
padding: 0;
margin: 0;
&.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
img, a{
display: block;
width: 100%;
height: 100%;
max-height:100%;
max-width:100%;
}
a{
display: inline-block;
}
}
}
}
}
}
When I tried to run the code initially none of the inner styles were being applied. This is because your CSS is nested like SASS or SCSS. When I refactored to ordinary CSS syntax it started working better.
As far as the a link behavior issue, you do not have an href attribute on that element so it behaves more or less like a <span> tag. There were also several other unnecessary styles in there. This is all I needed to get it to behave as I expected:
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
Full code and working demo:
.wrapper {
display: inline;
font-weight: bold;
text-align: center;
}
ul.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
}
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
.imagesItemCategoria img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="https://picsum.photos/300" />
</a>
</div>
</li>
</ul>
</div>