Currently I'm working on sort of Images , I want them to be in Center of page So I'm using margin-left and margin-right set to auto to center it.
and here's the problem :
it does not work when i let browser find the width , if i set Width to auto ,
it'll be in left side of page
this problem can result responsibility problem , and makes page not compatible with Retina
Here's My HTML code:
<div class="lang">
<img src="english.png" title="Visit Our English Community" /><a><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/>
</div>
and CSS Class :
.lang {
margin-left:auto;
margin-right:auto;
width:96px;
height:32px;
margin-bottom:3px;
}
You can do it with Css flex as follows:
.lang {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
<div class="lang">
<img src="english.png" title="Visit Our English Community" />
<img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/>
</div>
For horizontal center alignment:
.lang {
justify-content: center;
align-items: center;
display: flex;
}
<div class="lang">
<img src="english.png" title="Visit Our English Community" />
<img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/>
</div>
Try this or Check fiddle
https://jsfiddle.net/g42rtk8s/7/
.lang {
display: block;
height: 32px;
margin-bottom: 3px;
text-align: center;
}
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
I'll try to align 3 Logos with the same height but with different widths on a row over the hole screen-width: The first image should be aligned at the left end of the screen, the third one should be aligned at the right end of the screen and the second one should float in between the other two images with the same space between them. The space should get smaller when the display gets smaller until it hit a defined minimum space. From there on if the display gets further smaller the hole row should scale down. I hope the image helps in clarify what I have in mind.
how it should look like
It's for a MailChimp Newsletter.
That is how far I got:
.my-logo-container{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}
<div class="my-logo-container">
<div class="my-logos">
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</div>
</div>
Any Help is highly appreciated.
I have an alternative for you. Did you mean this?
.my-logo-container{
width: 100%;
margin:0;
}
ul.my-logos{
margin: 0;
padding: 0;
list-style: none;
}
ul.my-logos li{
width: 32.33333%;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin:0;
float: left;
text-align: center;
border:1px solid red;
}
ul.my-logos li a img{
max-width: 130px;
height:80px;
}
<div class="my-logo-container">
<ul class="my-logos">
<li>
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</li>
</ul>
</div>
I came up with this solution: Instead of defining a minimum space in css I added more space into the images themselves. Now they can touch eachother and it still looks good. With display: flex; and justify-content: space-between; I arranged them in a row. With max-width: 100%; and height: auto; the Images auto-resizes on smaller screens. It works for me now.
.logo-container {
display: flex;
justify-content: space-between;
}
.logo {
max-width: 100%;
height: auto;
}
<div class="logo-container">
<img class="logo" src="https://via.placeholder.com/100x80.png">
<img class="logo" src="https://via.placeholder.com/195x80.png">
<img class="logo" src="https://via.placeholder.com/175x80.png">
</div>
I'm having trouble centering pictures alongside text inside a container. Everything I try does something to the text but the images always remain with a gap in the bottom.
I tried every single flexbox property and none of them do anything with the icons. My hint is that the problem lies on the way I architectured the flexbox, since it's only my second time using it. Another option could be something inherited from html or body styling.
<div class="phone">
<div class="nightmare">
<img src="../C&C/img/email.png" width="18" height="18">
</div>
<div>
contador#gmail.com
</div>
<div class="nightmare">
<img src="../C&C/img/Call-Icon.png" width="18" height="18">
</div>
<div>
(303) 499-7111
</div>
</div>
.phone {
flex-wrap: wrap;
display: flex;
color: #ffffff;
background-color: #004c00;
justify-content: flex-end;
flex-direction: row;
align-items: center;
font-size: 1;
}
.nightmare {
align-items: center;
}
The green banner is my banner, the blue banner is the way I want it to look (not the colour, just the tidiness of the display).
Add the following CSS to your img tags and remove the height and width attributes from them.
img {
height: 1rem; /* Set it to your liking */
margin-right: 10px;
vertical-align: middle
}
This isn't a flexbox solution but will help you for sure.
Here's the codepen
https://codepen.io/faisalrashid/pen/BaBLKaB
You should use justify-content: center; to center align the items horizontally and
align-items: center; to center align the items vertically. Secondly, you can wrap the icon and text in one div, instead of two separate divs and then you can use display: flex and align-items to handle the alignment of items.
See the below example
.phone {
flex-wrap: wrap;
display: flex;
color: #ffffff;
background-color: #004c00;
justify-content: flex-end;
flex-direction: row;
font-size: 1;
justify-content: center; /** this will align items horizontaly **/
align-items: center; /** this will align items vertically **/
min-height: 50vh; /** Remove this. Added for demonstration only **/
}
.phone > div{
align-items: center;
display: flex;
}
.phone > div a{
display: flex;
align-items: center;
color: #fff;
font-family: Arial;
}
<div class="phone">
<div class="c-item">
<img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" />
contador#gmail.com
</div>
<div class="c-item">
<img src="https://img.icons8.com/pastel-glyph/2x/worldwide-location--v1.png" width="18" height="18" />
(303) 499-7111
</div>
</div>
I have added necessary comments to the code snippet. This will help you.
Try the below snippet:
.phone{
flex-wrap: wrap;
background-color: #004c00;
flex-direction: row;
font-size: 1;
display:flex;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
}
a{
color: #ffffff;
text-decoration: none
padding-left:10px;
padding-right:10px;
}
.nightmare2{
margin-left: auto;
}
<div class="phone">
<div class="nightmare">
<img src="https://cdn2.iconfinder.com/data/icons/sem_labs_icon_pack/icons/mail2.png" width="18" height="18">
</div>
<div>
contador#gmail.com
</div>
<div class="nightmare2">
<img src="https://www.iconsdb.com/icons/download/white/phone-69-48.png" width="18" height="18">
</div>
<div>
(303) 499-7111
</div>
</div>
Hey the problem with your code is that you are trying to apply align-items to a class which doesn't have a display: flex property.
Also use this:
.nightmare a{
display:flex;
align-items: center;
}
Also using the chrom developer tool that, the child in the flex div doesn't have extra margins, which can be a cause of them not aligning.
Also I would write my markup this way.
<div class="phone">
<div class="nightmare">
<a href="mailto:cplusc#gmail.com"><img src="../C&C/img/email.png" width="18" height="18">
<p>contador#gmail.com</p>
</a>
</div>
<div class="nightmare">
<a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18">
<p>(303) 499-7111</p></a>
</div>
</div>
and the CSS goes like this :
.phone{
display: flex;
}
.phone .nightmare a {
display: flex;
align-items : center;
}
.phone .nightmare a p{
margin-bottom : 0px;
}
I have a frustrating problem with the otherwise great flexbox capabilities. I have the following layout with a centered column
The problem is, if one of the texts in the row grows or shrinks, then the FB/IG icons will not be in the same column line anymore. See what happens:
How can I achieve for variable width texts to not make the element grow to the left, but make the FB and IG icons actually stay in the same line no matter the variable texts??
Here is the code
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
<div class="test-wrapper">
<img class="test-img" src="path" />
<div class="test-links">
<a class="test-link">
<i class="fb"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig"></i>
<span>LongerText</span>
</a>
</div>
</div>
Thank you for your help!
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: left;
align-items: center;
width:100px;
margin:0 auto;
}
.test-wrapper
{
text-align:center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test-wrapper">
<img class="test-img" src="https://dummyimage.com/100x100/000/fff" />
<div class="test-links">
<a class="test-link">
<i class="fb fa fa-facebook"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig fa fa-instagram"></i>
<span>LongerText</span>
</a>
</div>
</div>
I used <img src="http://via.placeholder.com/20x20" /> instead of icons, so to render something. position: absolute for text does the job.
Following MDN's definition:
[position] absolute: the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
... so left:100% moves it to the left for whole width of parent's element, which is only an icon. You can create a distance between icon/image and text using margin-left for text. position: relative for link makes it a hook for position of absolute child.
You can adjust precise values.
Snippet
.test-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.test-links {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 0 0;
}
.test-link {
position: relative;
}
.test-link span {
position: absolute;
top: 0;
left: 100%;
}
<div class="test-wrapper">
<img class="test-img" src="http://via.placeholder.com/50x50" />
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>Test</span>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>LongerText</span>
</a>
</div>
</div>
Since, span cannot take width, use p instead and then add the following class to you code:
.test-link p{
width: 50px;
height:auto;
word-break:break-all;
text-align:left;
}
And then you will achieve the desired format.
Here is a link to the fiddle supporting this answer.
Here is the snippet:
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
.test-link p{
width:50px;
height:auto;
word-break:break-all;
text-align:left;
}
<div class="test-wrapper">
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>Test</p>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>LongerText</p>
</a>
</div>
</div>
Hope this was helpful.
I want to center the 2 images but the images are being stretched out of proportion because of display: flex but justify-content wont work without it
is there another solution to centering the images?
<div class="column-photo">
<div class="center">
<img src="img/2.%20GenerationAnxiety%20page%202,2.png"
style="width:40vw;">
<img src="img/3.%20GenerationAnxiety%20page%203,3.png"
style="width:40vw;">
</div>
column-photo {
flex-wrap: wrap;
flex: 33.33%;
}
.center {
display: flex;
justify-content: center!important;
align-content: center!important;
}
You have missed dot with class column-photo.
Alternate way without specific width
.column-photo {
text-align:center;
display:block;
}
.center {
display:inline-block;
float:none;
}
If you want stretch the images but keep the aspact ratio you should wrap the images in a div with a individual width. Then you can give the image a width of 100% to keep the aspact.
If you should use vw in this case is another question
<div class="column-photo">
<div class="center">
<div class="img-container" style="width: 40vw">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="img-container" style="width: 40vw">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</div>
img{
width: 100%;
}
Looks like you've messed up some properties:
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="center">
<img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:10vw;">
<img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:20vw;">
</div>