I'm trying to help a friend with this site. Specifically he wants the two images below the large image at the start of the page to align with the edge of the page, so that the edge of the right image aligns with the edge of the image above it.
I created the following mini demo. In it I have a flex container around the anchors with flex-basis set to 490px. However the images are not staying inside the anchor elements, nor the main column container with width: 1000px. We would like the images to be 490px wide, and the left image should align with the left edge and the right image should align with the right edge.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Thoughts?
You were close, you just need to add a max-width of 100% to the images to stop them overflowing the container.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
.kickers img {
max-width: 100%;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
`
<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">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
flex
<script src="./slider.js"></script>
</body>
</html>
`
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
}
i watch in youtube but it's not working align-items: center;
justify-content: center; working
align-items: center; not working
why? youtube it's working..... plz help
The problem could be that you have not specified a flex-direction, which is necessary for align-items and justify-content to work. Try adding this to the body CSS:
flex-direction: column;
The problem is that you do not have content to apply align-items to. align-items is supposed to work on vertical alignment. what you are looking for is horizontal alignment probably.
check the following fiddle to get an idea of what is happening.
body {
background-color: #927df1;
display: flex;
}
.box{
width:200px;
height:200px;
border: 1px solid blue;
display:flex;
align-items:center;
}
<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">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<script src="./slider.js"></script>
</body>
</html>
Edit: In case you want to use the align-items to center your content vertically, just define flex-direction property to column. Default value is row so it will align according to row height. setting it to column will align your content according to column's width.
Your code working properly just a minor mistake.
by default width and height is 100%; in this case we just simply define height as 100vh
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
I`ve been struggling with some css code, specifycally with flex. First i had to figure it out how to stick footer at bottom but now i cant center my divs. Here is the html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as
you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</html>
</div>
and the css:
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.optional-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.content-wrap {
flex: 1 1;
}
You want the children of the flex to be centered. So I set .content-wrap display to flex, and aligned items within. also text-align center.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap {
flex: 1 1;
}
.content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</body>
</html>
I want to grow the div with the text of "Five" to cover the area below "Two and Three" in this grid. However, I'm not sure what to do beyond making the div having the property of "Flex:1". If you run the snippet below, you can see that "Five" is below only "Two".
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 80%;
margin: auto;
}
.Five{
flex: 1;
background-color: blue;
}
<!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>Document</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="One">One</div>
<div class="Two">Two</div>
<div class="Three">Three</div>
<div class="Four">Four</div>
<div class="Five">Five</div>
</div>
</body>
</html>
Add grid-column: 2 / 4 to .Five which will make that element span the 2nd and 3rd columns.
I'm wondering if there's a better way to evenly space the three divs within a parent div (horizontally) using flex. Here's what I have:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
width: 33.3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
As you can see, I set each child-div / column to width: 33.3% - is there a CSS property that will automatically force them to span 100% width of their parent, collectively, without using percentages?
If I get rid of width: 33%, I get this:
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I also tried setting the parent div to justify-content: space-between;, but this is now forcing the content of the inner divs to get aligned to the left (for the left div) or to the right (for the right div):
.container {
display: flex;
justify-content: space-between;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I know that setting each child div to width: 33% works, but is there a better way? Without having to calculate percentages if I wanted 7 columns, for example?
You're almost there, just try with justify-content: space-around;
As a plus, I'd recommend you have a look at this guide for a lot of interesting flexbox explanations :)
.container {
display: flex;
justify-content: space-around;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
/*width: 33.3%;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
flex-grow might be what you need here .
The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
.container {
display: flex;
}
.left-div, .middle-div, .right-div {
display: flex;
justify-content: center;
flex-grow:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div class="container">
<div class="left-div">
Left
</div>
<div class="middle-div">
Middle
</div>
<div class="right-div">
Right
</div>
</div>
</body>
</html>
I want to show an image in the center of a page with original size.
I tried the code below
.container
{
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container"><img src="1.png" alt="No Internet Connection" ></div>
</body>
</html>
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container"><img src="1.png" alt="No Internet Connection" ></div>
</body>
</html>
You can use display: flex;. It's responsive and works great. After that I used justify-content: center; because of this it is horizontal in the center. And because of align-items: center; and height: 90vh; it is vertical centered