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 */
}
Related
Problem: img is taller than img-box
I find two ways, but I don't want to do this:
remove img-box wrap
use max-height: 100vh; max-width: 100vw; in img tag
body {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.wrap {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 500px;
background: red;
overflow: hidden;
}
.img-box {
width: auto;
height: auto;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/900/500" alt="" />
</div>
</div>
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/200/600" alt="" />
</div>
</div>
(Codesandbox)
On img-box set height to 100% instead of auto.
That way img will not stretch img-box outside the boundaries of its parent.
You can also set height to a definite value, like height: 100px.
So im trying to make a flexbox which displays a countrys flag and the language name next to it. The problem i ran into was that the text and picture are treated individually and end up seperated if they are at the end of the box. Is there a way to make one flag with its language into one box and the same for the others, so that the flag and corresponding language are always together?
This is my code so far:
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.flex-container {
margin: auto;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 80%;
height: 500px;
background-color: aqua;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
<div class="flex-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>
This is a perfect example to use the grid system instead of flexbox
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.grid-container {
margin: 0 auto;
text-align: center;
display: grid;
width: 80%;
min-height: 500px;
background-color: #f5f5f5;
}
<div class="grid-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>
I am trying to center 2 div elements vertically and horizontally and this should work well and it usually does, but not here..
HTML
<div class="contact">
<h3>WHAT ARE YOU WAITING FOR?</h3>
<div class="cta-btn">
<h3>CONTACT US</h3>
</div>
</div>
CSS
.contact {
font-size: 0.8em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
.cta-btn {
width: 8em;
padding: 0.2em;
border-radius: 2em;
}
}
There are (at least) two ways to achieve what you're looking for.
One uses flexboxes. Here you need an initial container that consumes your full window and into this container you put another container that is positioned in the center and into that you can put your content (code is shortened to minimum):
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.flexcontainer {}
<div class="box">
<div class="flexcontainer">
<span class="left">Left Content</span>
<span class="right">Right Content</span>
</div>
</div>
[edit]: Obviously, the initial container (.box here) could also be a header or something not spanning the full windows height. In this case, you would not have to position it absolute and define the top, bottom, left and right positions but could work with width and height or use a dynamic size.[/edit]
The other method is based on the assumption that you know the height of your content container:
.container {
width: 500px;
height: 200px;
margin: calc(50vh - 101px) auto;
/* calc(50 percent of window height minus half the size of the container including borders!) */
border: 1px solid #000;
}
<div class="container">Content</div>
Correct this code, adding follow properties in css:
<div class="contact">
<h3>WHAT ARE YOU WAITING FOR?</h3>
<div class="cta-btn">
<h3>CONTACT US</h3>
</div>
</div>
.contact {
display: flex;
justify-content: space-between;
align-items: center;
h3 {
flex-shrink: 0;
}
.cta-btn {
flex-grow: 1;
display: flex;
justify-content: center;
}
}
.contact{
display:flex;
align:center;
}
.cta-btn{
display:flex;
align:center;
}
<div class="contact">
<h3>WHAT ARE YOU WAITING FOR?</h3>
<div class="cta-btn">
<h3>CONTACT US</h3>
</div>
</div>
Please have a look at this Vuetify fiddle: https://jsfiddle.net/L4r5aftq/
<div id="app">
<div class="address-card-container" style="background-color: pink;">
<v-card>
<div class="card-content-container">
<div class="icon-container" style="width: 30px;">
<v-icon>calendar</v-icon>
</div>
<div style="margin-left: 20px;">
<p><strong>Our Home</strong></p>
<p>123 4th Avenue N</p>
</div>
</div>
</v-card>
<v-divider horizontal class="mx-4"></v-divider>
<v-card class="add-property-card" style="margin: auto;">
<div class="card-content-container">
<div class="icon-container" style="width: 15px"><v-icon>add</v-icon></div>
<div class="add-property-container"><p>Add a property</p></div>
</div>
</v-card>
</div>
</div>
.address-card-container {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-bottom: 60px;
align-items: stretch!important;
.card {
border: 1px solid #ccc;
width: 50%;
height: 100% !important;
min-height: 100% !important;
.card-content-container {
min-height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
margin: 30px 7%;
.icon-container {
.v-icon {
height: 50px;
width: 100%;
color: #009FD4;
}
}
.add-property-container {
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
.add-property-card {
cursor: pointer;
}
}
It consists of two cards inside a flex box configured as row and space-between:
I am trying to set the height of each card to take up 100% of the flex box, but it is not working.
If you go to the fiddle, you'll see that I set height: 100%!important and min-height: 100%!important. I also set align-items: stretch!important in the flex box. But the card on the right just doesn't want to take up the full height of the flex box.
How can I make the cards take up the full height of the flex box?
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%;
}