I have 3 images in a div that I need centered on my webpage. I need the 3 images centered with the main top image.
I believe the .container needs to be centered but I can not figure it out for the life of me! Thank you!
Here is the code I have made. All is working I just need the 3 images centered.
<h2 class="section-title desktop-12" style="text-align: center;"></h2>
<p><img src="//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024" alt="Join The Tribe" /></p>
<p> </p>
<style><!--
.container { display: inline-block; position: relative; width: 30%; margin: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #f03d41; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
--></style>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725" alt="Creative" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725" alt="CreativeHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725" alt="Brand_Rep" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725" alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725" alt="Influencer" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725" alt="InfluencerHover" class="image" /></div>
</div>
You have to add a wrapper div around your .container divs and then make that the same width as the image at the top and have it text-align center.
The style for this:
.container-wrapper {
text-align: center;
width: 1920px;
}
1920px comes from the image the top that you're trying to center under.
Here's a fiddle of this working
The html demonstrating the wrapper is:
<div class="container-wrapper">
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725" alt="Creative" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725" alt="CreativeHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725" alt="Brand_Rep" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725" alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725" alt="Influencer" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725" alt="InfluencerHover" class="image" /></div>
</div>
</div>
The easiest way to achieve what you want with what you already have is to set text-align: center on a parent container of your .container divs. I've tided the code a little bit, but I've simple added a .container-wrapper that contains your centered elements and it should work as desired.
.container {
display: inline-block;
position: relative;
width: 30%;
margin: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f03d41;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container-wrapper {
text-align: center;
}
<h2 class="section-title desktop-12" style="text-align: center;"></h2>
<p><img src=
"//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024"
alt="Join The Tribe" /></p>
<p></p>
<div class="container-wrapper">
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725"
alt="Creative" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725"
alt="CreativeHover" class="image" /></div>
</div>
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725"
alt="Brand_Rep" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725"
alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725"
alt="Influencer" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725"
alt="InfluencerHover" class="image" /></div>
</div>
</div>
To make center child element(s) set this style to their parent element:
.parent{
display: flex;
justify-content: center;
}
No need to display: block or margin: auto or position: absolute/relative ... for child element(s).
In your case wrap the .container divs in a parent div that said.
Related
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center on the container(id: gallery) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
How about styling the image wrapper .images like
.images {
width:80%;
margin:0 auto;
text-align:left;
}
this works
body{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
section{
height:400px;
width:400px;
background:grey;
}
img {
margin:48px;
}
<section>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
</section>
Give your #gallery div a max-width, text-align: center, and margin:auto, then put your header in another div inside the #gallery, but outside the #images. Then put text-align: left on your #images div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
HTML
<h2>HEADER</h2>
<div class="container">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
CSS
h2 {
text-align: center;
}
.container {
float: left;
}
img {
border: medium solid black;
width: 200px;
height: 350px;
margin: 5% 2%;
}
How do I get the two images contained within the two divs to display side-by-side? I've tried changing the variables within container as display: inline-block; and float: left; as suggested by some other threads, but those did not work the way I tried them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
How it looks:
I want these to be displayed side-by-side, not on top of one-another.
If you wrap the two containers in a div set to display: flex you'll be fine.
<div class="wrapper">
<div class="container">
<!-- your content -->
</div>
<div class="container">
<!-- your content -->
</div>
</div>
.wrapper {
display: flex;
}
I hope it helps :)
Simply add float:left to the container class.
Result:
Hi I have a design i'm trying to recreate using html and css
and this is what i have been able to create so far
this is my html structure
1:
my current html structure looks like with the round borders . when i try to position the inner div at the edges of the round border as in the design the
inner div images get cut. please can you help me fix this
thanks
<div id="container">
<div id="tshirt">image</div>
<div id="tshirt">image</div>
<div id="bag">image</div>
</div>
This should get you started.
.outercircle {
height: 500px;
width: 500px;
border-radius: 100%;
border: 2px dashed purple;
margin: 10% auto;
position: relative;
}
.item {
padding: 10px;
background: purple;
position: absolute;
transition: background .2s;
}
.item img {
border-radius: 100%;
}
.item-1 {
top: 50%;
left: -50px;
transform: translateY(-50%);
}
.item-2 {
top: 50%;
right: -50px;
transform: translateY(-50%);
}
.item-3 {
left: 50%;
top: -50px;
transform: translateX(-50%);
}
.item-4 {
left: 50%;
bottom: -50px;
transform: translateX(-50%);
}
.item:hover {
background: black;
}
<div class="outercircle">
<div class="item item-1">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="item item-2">
<img src="http://placehold.it/100x100" alt="" /></div>
<div class="item item-3">
<img src="http://placehold.it/100x100" alt="" /></div>
<div class="item item-4">
<img src="http://placehold.it/100x100" alt="" /></div>
</div>
I tried to get an example from w3schools running, but in my case there are multiple images. The overlay is displayed for the entire window instead of the 1st image (I plan to do this for all images later).
Here is my code:
.flex-container {
display: flex;
}
.col1 {
position: relative;
display: block;
}
.img1-wrap {
display: block;
}
.image {
display: block;
/*width: 100%;*/
height: auto;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="col col-1">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2">
</div>
<div class="col col-3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4">
</div>
</div>
Add position:relative to .img1-wrap and give a try.
When you make a element positioned absolute, Make sure its parent
is positioned relative
CSS
.img1-wrap {
display: block;
position: relative;
}
Is this what you want to achive Working Fiddle
Hope this helps..
It seems you are not using positioning the right way. Use relative for each element block with the text container.
You should restructure your HTML & CSS in such way:
.flex-container {
position: relative;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 200px;
}
.image {
width: 100%;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Hope this helps and this is what you're trying to achieve.
I am trying to center a group (a table with 3x3) of pictures to the center of the webpage, I manage to do it before adding image overlay to it. But since I added image overlay, the images are appearing on top left of the webpage. How do i group them and center them, also how am I supposed to get the image location so that when I set the image overlay, it goes to the specific picture as each picture will have different image overlay text.
CSS
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
HTML
<div style="text-align:center">
<div class="container">
<img src="wheel1.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheels2.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheel3.jpg" class="image"">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
`
You could center it using flexbox. Change your main div
<div style="text-align-center;">
......
</div>
to
<div style="display: flex; flex-direction: column;align-items: center;">
.....
</div>
And it should work.
.wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Here is the fiddle.