I want to understand why images don't necessarily center properly. I was told that by default, <a> tags are inline elements, so in order to change their size, you will need to change their display property to block or inline block. Then, once you set the width of the <a> tag, you can set the width of the <img> tag to 100% and it will conform to the shape of the <a> tag.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<img src="photos/thumbnails/01.jpg" alt="Image 1">
<img src="photos/thumbnails/02.jpg" alt="Image 2">
<img src="photos/thumbnails/03.jpg" alt="Image 3">
<img src="photos/thumbnails/04.jpg" alt="Image 4">
<img src="photos/thumbnails/05.jpg" alt="Image 5">
<img src="photos/thumbnails/06.jpg" alt="Image 6">
<img src="photos/thumbnails/07.jpg" alt="Image 7">
<img src="photos/thumbnails/08.jpg" alt="Image 8">
<img src="photos/thumbnails/09.jpg" alt="Image 9">
<img src="photos/thumbnails/10.jpg" alt="Image 10">
<img src="photos/thumbnails/11.jpg" alt="Image 11">
<img src="photos/thumbnails/12.jpg" alt="Image 12">
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
padding: 0 auto;
}
/* If a flex container is set to width */
But I've tried that it still hasn't been working. I know images have their own dimensions when they get imported, but whats the logic here? I keep having to expierment with CSS settings when working with images because they are so unpredictable.
https://ibb.co/Y02j6VL
There might be 4 possibilities.
1) Change your .images padding to margin: 0 auto, like so:
.images {
border: 1px red solid;
margin: 0 auto;
}
2) Depending on your layout its also possible that images is taking 100% width.
So you need to also add text-align:center on images div.
3) Your images div can be tranformed to display:flex and then set justify-content: center on it.
4) If you want to use .container content to be centered. You can use align-item:center on the images div. Since, container has flex-direction:column
.container {
display: flex;
flex-direction: column;
align-items:center;
margin: 0 auto;
padding: 10px;
border: 1px solid black;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
margin: 0 auto;
text-align: center;
}
<div class=container>
<div class="images">
<img src="photos/thumbnails/01.jpg" alt="Image 1">
<img src="photos/thumbnails/02.jpg" alt="Image 2">
<img src="photos/thumbnails/03.jpg" alt="Image 3">
<img src="photos/thumbnails/04.jpg" alt="Image 4">
<img src="photos/thumbnails/05.jpg" alt="Image 5">
<img src="photos/thumbnails/06.jpg" alt="Image 6">
<img src="photos/thumbnails/07.jpg" alt="Image 7">
</div>
</div>
Since your code is using display: flex; here is a solution that continues to use it. However it makes more sense to flex the images class. To center the content use align-items: center; justify-content: center; depending on flex-direction.
Sidenote: padding: 0 auto; is not a thing, there is no auto value for padding.
.container {
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
width: 245px;
display: flex;
flex-direction: row;
border: 1px red solid;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Related
I can't seem to get my title and anything below to centre no matter what I use in CSS. Any help would be appreciated!
<div class="title"><h1>Places to Stay</h1></div>
<div id ="imageContainer">
<img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
<!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
<img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
<!--img src="https://www.timeout.com/milan-->
<img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
<!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
</div>
CSS
/*This comment is for id imageContainer. It sets a display as flex in a row and spaces it evenly*/
#imageContainer {
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
/*This is a comment for the id "title", it sets titles to a different size and centers it*/
.title {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
It works fine on my side, but You can spacify h1 h2 and p in css.
#imageContainer {
display:flex;
flex-direction: row;
justify-content: space-evenly;
}
.title {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
h1, h2, p {
font-size: 3em;
text-align: center;
padding: 1px 2px 1px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Places To Stay</title>
<meta charset="utf-8" />
<link href="../assets/css/first.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img class="logo" src="../assets/images/mockz.jpg" alt="Mockz logo" />
</header>
<nav>
Home
</nav>
<main>
<div class="title"><h1>Places to Stay</h1></div>
<div id ="imageContainer">
<img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
<!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
<img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
<!--img src="https://www.timeout.com/milan-->
<img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
<!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
</div>
<h2>Barcelona, Milan, Paris</h2>
<p>Just three of the fantastic locations we have on offer here at Mockz, the coolest hotels in Europe located in the heart of
these fantastic cities</p>
<div class="quote"><p>“Travel is the only thing you buy that makes you richer”</p></div>
<div class="quoteComment"><p>Here at Mockz we make sure that when you decide to travel, you do it in style</p></div>
</main>
<footer>
<p id = "footer"><span class="important">Contact Us</span> Email: booking#mockz.com Phone: 0191 268 9999 </p>
<!--img src for the logo is my own design based on ="https://news.marriott.com/brands/moxy-hotels/"-->
</footer>
</body>
I know there are a lot of questions like this, and I have tried many of the methods suggested by those who have answered those questions, however, nothing works. I am beginning to think that my methods are not wrong, but that something else in my code is interfering? Such as my main div
If anyone could help me out I would really appreciate it. Currently, my images are just stacked on top of each other (vertically) on the left edge of the container...
This is the HTML:
<div class="main">
<!-- a bunch of <p> tags here I won't include -->
<div class="img123">
<img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/>
</div>
</div>
This is the CSS solution I was trying to use for my images and the .main div
.image123 {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
.main {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 930px;
display: absolute;
}
My favourite way is to set up 2 classes site-wide:
.row {
display: flex;
flex-direction: row;
}
.col {
flex-direction: column;
}
This way you can align stuff easily using these two classes. Row should always be the parent container. Here is how you would handle the html:
<div class="row">
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
</div>
If you want it evenly spaced use:
.col {
flex: 1;
}
Stackblitz example: https://stackblitz.com/edit/js-nddsvq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<style>
.main{
width:100%;
height:100%;
background-color:yellow;
display:flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="main">
<div class="image"> <!--1 image-->
<img src="https://images.pexels.com/photos/1864189/pexels-photo-1864189.jpeg" width="200" height="200">
</div>
<div class="image"> <!--2 image-->
<img src="https://images.pexels.com/photos/1878095/pexels-photo-1878095.jpeg" width="200" height="200">
</div>
<div class="image"><!--3 image-->
<img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" width="200" height="200" >
</div>
</div>
</body>
</html>
Scenario: I want to make a html page that has many image thumbnails (about 20).
I want to make it adaptive/responsive. It should have 4 thumbnails in a row (see Picture1) when it's on wider browser (such as PC browser - mozilla etc) (see Picture2)
Then, when the browser reduces it's size, it should decrease it's size.
And if the browser is too small, 1 thumbnail per row should appear (such as mobile browsers etc). (see Picture3)
It should have space in between photos (padding?)
I think this should be done using CSS?
I only have following code, which reduces thumbnail's size when browser's size is reducing.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>
P.S: EDIT, SEE THIS PHOTO FOR FURTHER CLARIFICATIONS.Thanks
you can achieve this using media queries
take a look at this snippet:
#container {
width: 100%;
max-width: 980px; /* updated - choose whatever width you prefer */
margin: auto /* updated */
}
#container > div {
width: 25%;
float: left;
}
#container img {
max-width: 100%;
display: block;
box-sizing: border-box;
padding: 5%
}
/*whatever width query you like for phones*/
#media screen and (max-width: 640px) {
#container > div {
width: 100%;
float: none
}
<div id="container">
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
</div>
Newbie here.
I am trying to create a page of 12 equal-sized images in a 3 Column * 4 Row layout.
I am having a problem with unwanted space appearing between each row. I am currently using <br>, which I know is incorrect, but I don't know the correct way to do it. As I understand it, tables are now considered a poor method?
I currently have CSS :
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: black;
}
.centerDiv {
width: 60%;
height:200px;
margin: 0 auto;
background-color:#FFA500;
}
.pic {
border-left: 0px solid black;
border-right: 0px solid black;
float: left;
/* height: 300px; */
/* width: 300px; */
margin: 0px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 0px #111;
box-shadow: 0px 0px 0px #111;
}
And my HTML :
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>JimithyH</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div class="tilt pic">
<div class="imgContain">
<img src="tree-0-0.jpg" alt="">
</div>
</div>
<div class="tilt pic">
<img src="tree-0-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-0-2.jpg" alt="">
</div>
<br clear="all">
<div class="tilt pic">
<img src="tree-1-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-1-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-1-2.jpg" alt="">
</div>
<br/ clear="all">
<div class="tilt pic">
<img src="tree-2-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-2-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-2-2.jpg" alt="">
</div>
<br clear="all">
<div class="tilt pic">
<img src="tree-3-0.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-3-1.jpg" alt="">
</div>
<div class="tilt pic">
<img src="tree-3-2.jpg" alt="">
</div>
</body>
</html>
So it looks like the comments beat me to it but all you need is to set the width of an image to 33.333%, that way the browser will automatically start a newline when it runs out of space. Personally i'd like to have some padding around the image so my CSS for an image like yours would be:
img {
width: 30%;
padding: 1%;
}
Seems you are missing to define the width of the tag that encloses the tag.
You need to split the body width 100% for every three and so each should have 33% (just round off).
so you can mention in css as
#tilt pic
{
width : 33%;
margin-left : 2px; // as per your requirement
}
This will surely works for you.
This question already has answers here:
Making a div vertically scrollable using CSS
(10 answers)
Closed 7 years ago.
I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.
my code for the horizontal scroller is
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row">
<div id="divd" style="width: 1680px;">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
The css I used is as follows
.pic - container {
/* The width of mydocument */
width: 1350 px;
margin: 0 auto;
white - space: nowrap;
overflow - x: inherit;
overflow - y: hidden; -
ms - overflow - style: -ms - autohiding - scrollbar;
}
.pic - row {
/* As wide as it needs to be */
width: 1527 px;
}
Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling
Use the css below
.pic-container {
width: 50px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
EDIT :- Added a '.' before the class name
see the fiddle link HERE
you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.
.pic-container {
width: 1350px;
margin: 0 auto;
white-space: nowrap;
}
.pic-row {
/* As wide as it needs to be */
width: 1350px;
height: 400px;
overflow: auto;
}
.pic-row a {
clear: left;
display: block;
}
<div class="pic-container">
<div class="pic-row">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
Try this:
index.html:
.pic-container {
width: 600px;
height: 600px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="pic-container">
<img src="images/A.png" />
<img src="images/B.png" />
<img src="images/C.png" />
<img src="images/D.png" />
<img src="images/E.png" />
</div>
</body>
</html>