The following code works in all modern browsers that I've tested (safari, chrome and firefox) except internet explorer. I'm trying to vertically and horizontally center an image inside logo. The problem is that the img overflows the container which is 50px 50px. If I remove flexbox from the css, the image does not overflow, but then it is no longer centered.
I've had a look at Flexbugs to try and solve the issue. But no luck. Any suggestion is much appreciated.
html
<div class="content">
<ul>
<li>
<section class="post">
<div class="post-header">
<div class="logo">
<img src="#" alt="">
</div>
</div>
</section>
</li>
</ul>
</div>
css
.content {
max-width: 400px;
padding-left: 1em;
padding-right: 1em;
}
.logo {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #000;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left;
height: 50px;
width: 50px;
}
img {
max-height: 100%;
max-width: 100%;
}
Related
I have a figure tag for my shopping cart icon, which sits beside the header navigation. The png img inside is the perfect size, and fills the height of the figure tag. But for some reason, the figure tag is too long. I've tried resizing the figure tag width and the image width, but nothing will make it smaller or erase that empty space which is covering my final menu option. I didn't have or notice this problem earlier, but I made some necessary changes to the CSS and since then, I've noticed this issue. No matter what I change, nothing seems to alter the figure size. [It spans across so I cannot hover over the 'help' option].
<div class="header-wrapper">
<div class="header-split">
<a class="home" href="#">Lu Steven</a>
<div class="menu-cart">
<nav>
<ul class="overall-nav">
<li>gallery</li>
<li><span>|</span></li>
<li>about</li>
<li><span>|</span></li>
<li>shop</li>
<li><span>|</span></li>
<li>exhibitions</li>
<li><span>|</span></li>
<li>contact</li>
<li><span>|</span></li>
<li>help</li>
</ul>
</nav>
<figure>
<img src="/images/cart.png"></img>
</figure>
</div>
</div>
</div>
CSS:
/* Header */
header ul{
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
width: 150%;
letter-spacing: 3px;
margin-left: -35%;
}
header a{
text-decoration: none;
color: aliceblue;
}
header a:hover{
color: #9ec8f0;
}
.header-wrapper{
position: absolute;
height: 7vh;
width: 100vw;
background-color: rgb(43, 43, 43);
color: aliceblue;
display: flex;
flex-direction: row;
}
.header-split{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin: auto;
}
.home{
display: flex;
align-items: center;
}
.menu-cart{
display: flex;
flex-direction: row;
align-items: center;
}
/* Cart */
figure{
display: flex;
flex-direction: row;
justify-content: right;
}
header img{
height: auto;
width: 35%;
}
header img:hover{
cursor: pointer;
opacity: 50%;
}
Hi there there is a small error in your code the img is a self closing tag you don't need to close it like this </img> it should be something like this
<img src="" alt=""/>
correct this error and your problem might get solved
This flex-wrap: wrap code works in Firefox (both laptop and mobile) but not in Chrome (when the browser's resized to small) or non-Firefox mobile browsers.
In Firefox, on a large viewport (e.g., a laptop) the images (which are all .png) appear side by side; and on a small viewport (e.g., a mobile phone) the images stack. In Chrome (both when a laptop browser is sized to small and on a mobile), the images move closer and closer together and then overlap each other (and butt up to the right-hand side of the screen.
Screenshot of images overlapping on Chrome
What have I done wrong?
NB: the head contains <meta name="viewport" content="width=device-width, initial-scale=1">
.container {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding-left: 6%;
padding-right: 6%;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
img { width: 100%;
height: 100%;
}
.logo_box {
margin: 2vh 2vw;
align-items: baseline;
}
.logo_box img {
display: block;
max-width: 15vw;
min-width: 150px;
flex-basis: 150px;
height: auto;
width: auto;
margin: 2vw;
}
.align-items_center {
align-items: center;
}
<div class="container">
<div class="gallery align-items_center">
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 1">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 2">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 3">
</div>
<div class="logo_box">
<img src="https://lh3.googleusercontent.com/-z8NxswFxbGEQSsXZrpz--9kTwUSHmdN8Oyi0b4kibJhUeAhSCBUeZzmdoSwC8DO0QjlCg=s85" alt="Alt text 4">
</div>
</div>
</div>
Not really an explanation, seems like Chrome hardly recalculate size of each element on resize.
a different approach, turning margins into padding and min-width on img to its container seems less buggy for chrome:
.container {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding-left: 6%;
padding-right: 6%;
border: solid;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
img {
width: 100%;
height: 100%;
}
.logo_box {
margin: 2vh 2vw;
align-items: baseline;/* ?? is this a flex box ?? */
min-width: 150px; /* added */
padding: 2vw; /* from img margin */
}
.logo_box img {
display: block;
max-width: 15vw;
min-width: 100%; /* fits to parent's min-width */
}
.align-items_center {
align-items: center;
}
<div class="container">
<div class="gallery align-items_center">
<div class="logo_box">
<img src="http://dummyimage.com/150" alt="Alt text 1">
</div>
<div class="logo_box">
<img src="http://dummyimage.com/100" alt="Alt text 2">
</div>
<div class="logo_box">
<img src="http://dummyimage.com/200" alt="Alt text 3">
</div>
<div class="logo_box">
<img src="http://dummyimage.com/250" alt="Alt text 4">
</div>
</div>
</div>
The problem is the max-width: 15vw in the logo_box img declaration block.
For whatever reason, the vw is handled differently in Chrome and Firefox.
I would suggest using a different unit of length or removing the rule.
I'm constructing a simple layout with a title and sub-title. When the two can be displayed on one line without the text wrapping, they should do so with a small amount of spacing between them. In all other cases, the title and sub-title should occupy 100% width. There should be no margin-left on the sub title.
I have created this using Flexbox and the gap property. It renders properly in Firefox:
Here's the code:
header {
font-family: sans-serif;
background-color: rebeccapurple;
color: #fff;
padding: 0 5px;
}
.container {
max-width: 800px;
width: 100%;
flex-grow: 1;
margin-left: auto;
margin-right: auto;
}
header .container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 0.5rem;
align-items: baseline;
}
<header>
<div class="container">
<h1>Long title for the page itself</h1>
<h2>Subtitle</h2>
</div>
</header>
<br />
<header>
<div class="container">
<h1>Shorter title</h1>
<h2>Subtitle</h2>
</div>
</header>
Unfortunately, popular browsers such as Google Chrome have failed to implement support for gap used in conjunction with a display: flex layout.
Is there a way I can implement this using e.g. display: inline-block elements and negative margins such that it will work in legacy browsers like Chrome and Internet Explorer?
Instead of gap: .5rem, use margin-right: .5rem on the h1.
h1 {
margin-right: .5rem;
}
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
header {
font-family: sans-serif;
background-color: rebeccapurple;
color: #fff;
padding: 0 5px;
}
<header>
<div class="container">
<h1>Long title for the page itself</h1>
<h2>Subtitle</h2>
</div>
</header>
<br />
<header>
<div class="container">
<h1>Shorter title</h1>
<h2>Subtitle</h2>
</div>
</header>
I am trying to vertically and horizontally centre images within a javascript slideshow, however, I cannot figure out how to make this work,
I have tried display: inline-block with vertical-align: center; but it wont work
Any suggestions?
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="nextprevious">
<a class="prev" onclick="plusSlides(-1)">←</a>
<a class="next" onclick="plusSlides(1)">→</a>
<div class="numbertext"><span>003</span> / <span>003</span></div>
</div>
You should check out display: flex, and justify-content: center; and align-content: center; properties.
.slideshow-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.mySlides {
margin: 0px auto; /* horizontal align center in div */
}
I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.
<div id="flex-container">
<div id="container1"></div>
<img src="#" alt="">
<div id="container2"></div>
</div>
#container1 and #container2 have their own height, and the img should use the remaining height inside #flex-container.
This snippet works on Firefox, but doesn't work in Chrome. (jsfiddle)
#flex-container{
height: 300px;
width: 500px;
display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 5px solid black;
}
#container1, #container2{
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
Chrome needs -webkit- prefixes for flexbox, but the issue doesn't seem to be this.
What can be happening? Is a browser bug or I'm forgetting something?
There are two problems you need to overcome:
Firefox solves them both on its own, but Chrome needs assistance.
Problem #1
The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.
Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
A complete explanation of this issue can be found here:
Why doesn't flex item shrink past content size?
Problem #2
Then you hit the second problem: keeping the aspect ratio. This is a common problem in flex containers. One option is to define a height for the image:
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>