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.
Related
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
I am trying to make the following webpage responsive but when I adjust the screen height the logo image gets cut as I decrease the height of the screen.
I am unable to find the common ground where I can set the logo image as full view and set some padding around the logo so that it doesn't get stuck to the top screen.
Below is the GIF image that describes the issue:
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>
What you need to do is just change css of body from display: flex; to display: inline-grid;. Hope this will solve your issue.
body {
background-color: black;
display: inline-grid;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
And HTML is;
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>
Add height: 100% to section
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
section {
height: 100%;
}
img {
height: 15em;
width: 15em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://dummyimage.com/300">
<div>
<h1>Welcome</h1>
</div>
</section>
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
I'm using wkhtmltopdf to convert a HTML to PDF. I know wkhtmltopdf uses an old version of webkit, which makes things a little more complicated.
I have a contact image and I want to display the contact name right next to it:
Image: How it's supposed to look
This is my HTML:
<div class="contact">
<img src="C:/mypath/picture.jpg">
<span>Contact Name</span>
</div>
CSS:
div.contact {
display: -webkit-flex;
flex-direction: row;
justify-content: left;
}
div.contact>img {
width: 70px;
border-radius: 50%;
margin-right: 20px;
}
div.contact>span {
display: inline-block;
width: 110px;
}
Doesn't work so far. Applying align-items: center; to div.contact doesn't work either.
I think I found your solution. Actually align-self is working but .contact height is not big enough to cover viewport. So I wrote this; I hope it's enough for you.
For HTML
<div class="contact">
<div class="contact-box">
<img src="C:/mypath/picture.jpg">
<span>Contact Name</span>
</div>
</div>
And for CSS
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #000000;
}
.contact {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
margin: auto;
}
.contact-box {
background-color: white;
padding: 10px;
}
.contact img {
align-self: center;
justify-self: center;
width: 70px;
border-radius: 50%;
margin-right: 20px;
}
.contact span {
align-self: center;
justify-self: center;
width: 110px;
}
I have a list of network icons I am trying to show them in a circle with a white background. Here is what I have right now. I am trying to get the icon to fit into the circle .
.logo {
display: -ms-flexbox;
-ms-flex-align: center;
-ms-justify-content: center;
display: flex;
align-items: center;
overflow: hidden;
color: #1e1e1e;
width: 100%;
height: 100%;
max-height: 88px;
max-width: 88px;
margin: 0 auto;
background: url('/networks/network-logo-bg#2x.png') center center no-repeat;
background-size: contain;
img {
width: 80%;
font-size: 10px;
font-weight: 700;
text-align: center;
color: #000;
margin: 0 auto;
#include lazyLoad(null);
}
}
HTML:
<div key={index} className="logo">
<img className="lazyload" src={logo.icon} alt={logo.name}/>
</div>
I want the icon to be inside the circle and aligned to the center.
You can try something like this:
HTML:
<div class="circle">
<img src="https://image.flaticon.com/icons/svg/826/826356.svg">
</div>
CSS:
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: black;
display: flex;
justify-content: center;
}
img {
width: 50%;
}
Demo