I'm just starting to learn HTML/CSS and I can't get flexbox to vertically justify elements (or do much of anything at all). I'm having trouble conceptually understanding why it's not recognizing the elements as separate elements to justify.
CSS and HTML:
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.odd-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #dfe1e7;
}
.even-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #eeeff2;
}
#e6 {
margin: auto;
width: 100px;
height: 100px;
border: 4px solid black;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styleA.css" />
<title>CS142 Project #1</title>
</head>
<body>
<div class="box">
<span class="odd-elements">A</span>
<span class="even-elements">B</span>
<span class="odd-elements">C</span>
<span class="even-elements">D</span>
<span class="odd-elements">E</span>
<span id="e6">F</span>
</div>
</body>
</html>
Just change your CSS to:
.odd-elements, even-elements{
display: inline-flex;
justify-content: center;
align-items: center;
}
If you would like to center your child item, you have to use your child as a flex container. In that case, the span tags are your child. So, You have to add display: flex (To do flex container), justify-content: center, align-items: center in your span tag. By the way, It would be great If you add a common class in your span tag.
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box span {
display: flex;
justify-content: center;
align-items: center;
}
.odd-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #dfe1e7;
}
.even-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #eeeff2;
}
#e6 {
margin: auto;
width: 100px;
height: 100px;
border: 4px solid black;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styleA.css" />
<title>CS142 Project #1</title>
</head>
<body>
<div class="box">
<span class="odd-elements">A</span>
<span class="even-elements">B</span>
<span class="odd-elements">C</span>
<span class="even-elements">D</span>
<span class="odd-elements">E</span>
<span id="e6">F</span>
</div>
</body>
</html>
Related
Desired Ui
I'm trying to make a search bar with a button to the right of it, in which both are halfway overlapping a banner. Above both of these is a title (One issue I'm having is the title covering the search bar when the page shrinks).
I have already made it, but it is far from mobile responsive. The most important thing I am struggling with is the button going to the next line when the page shrinks. The button needs to stay square so how do I make the search bar the only thing shrinking? Does anyone have any ideas on how to make this look good at all sizes?
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
width: 100%;
height: 100%;
}
.header {
height: 50%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-size: 30px;
border-bottom: solid 2px;
}
.search {
z-index: 20;
position: absolute;
background: transparent;
padding: 20px;
width: 100%;
text-align: center;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
.search_main {
background: white;
width: auto;
padding: 10px;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 20px;
height: 100%;
border: solid 2px;
}
.search_input {
/* border-radius: 20px; */
border: solid 0px;
outline: none;
text-decoration: none;
height: 100%;
padding: 8px;
}
.btn {
background: white;
width: auto;
/* padding:10px; */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 50%;
/* height:100%; */
border: solid 2px;
padding: 7px;
margin-left: 20px;
}
.ionicon {
/* width: 35px;
height: 35px; */
font-size: 25px;
font-weight: 40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="root">
<div class="header">
Search from hundreds of recepies.
</div>
<div class="search">
<div class="search_main"><input class='search_input' placeholder='Search...'></div>
<div class="btn">
<ion-icon name="filter-outline" class='ionicon'></ion-icon>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
I have put this code on the board class to organize the < div > in the class.
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
However the justify content doesn't work... both div inside board class glued each other. but the align-items and flex-flow works well, why justify-content doesn't?
Here is my website looks like currently
my HTML code:
<!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" type="text/css" href="style.css">
</head>
<body>
<main>
<header>
<h1>Draw clues about the music playing </h1> <img src="images/v94_61.png">
</header>
<div class="board">
<div class="color-board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="drawer">
</div>
<div class="tool-board">
</div>
</div>
</main>
</body>
</html>
my css code:
body {
margin: 0px;
background: linear-gradient(rgba(218, 210, 153, 1), rgba(176, 218, 185, 1));
background-repeat: no-repeat;
background-size: 100% 100%;
}
main {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
margin: 10px;
padding: 15px;
overflow: hidden;
}
header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: fit-content;
height: fit-content;
border-radius: 1.75em;
background-color:rgba(131, 131, 131, 0.4000000059604645);
margin-bottom: 2%;
padding: 0px 5%;
}
header img {
width: "fit-content";
height: 90px;
}
header h1 {
vertical-align: middle;
white-space: nowrap;
min-width: 270px;
}
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
.color-board{
display: flex;
flex-flow: row wrap;
align-items: center;
background-color: rgba(131, 131, 131, 0.4000000059604645);
width: 100px;
height: fit-content;
}
.color-board div {
width: 30px;
height: 30px;
margin: 5px;
border: 1px black solid;
border-radius: 0.5em;
background-color: white;
}
.drawer{
background-color: white;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
width: 732px;
height: 352px;
}
How do I center an image in a circle around it? The circle should then lie behind the picture and only frame it.
HTML
<div>
<div class="circle"></div>
<img src="../../assets/img/img.png" alt="" class="showslide">
</div>
CSS
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #fff;
border-radius: 50%;
z-index: -1;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
Do you need to keep the circle div as a sibling of the image?
Because if you put the image inside the circle div, your code it´s already working:
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #000;
border-radius: 50%;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="circle">
<img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>
I've removed the z-index (not needed in this case) and changed the border color to black.
Not quite sure what you are trying to accomplish here but as far as I understood, ur trying to make the frame unclickable. First of all, you can't keep the frame behind the picture because then the image gets in front of it and keeps it hidden.
pointer-events: none;
Set this for the frame and it should be good.
How do I center an image in a circle around it?
One approach would be to apply two CSS properties to the <img>:
a border
an outline
Working Example:
.my-image {
width: 144px;
height: 144px;
border: 18px solid rgb(255, 255, 255);
border-radius: 50%;
outline: 1px solid rgb(191, 191, 191);
}
<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
<h4>Center Image</h4>
<div class="image-container">
<img
src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
width="100"
/>
</div>
<!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>
</head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
</style>
<body>
<h4>Center Image</h4>
<div class="image-container">
<img class="image-container"
src="i.jpg"
width="100"
/>
</div>
<input type="file" >
</body>
</html>
I'm making my first website, but i can't make the icon to vertically align with the text
if i used Font Awesome icons it works great, but i don't want to use it.
here is my code and the image to better describe my problem.
"Can't align the arrow icon with text" Image
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
margin-right: -12px;
}
.link {
display: block;
text-decoration: none;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.leftDiv {
width: 200px;
height: 100%;
background-color: lightgray;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nature Gallery</title>
<link rel="shortcut icon" href="Icon/NG.png" />
<link href="Style/StyleSheet1.css" rel="stylesheet" />
<link href="Content/font-awesome.css" rel="stylesheet" />
</head>
<body>
<div class="leftDiv">
<a href="Home.html" class="link">
<i class="fa fa-long-arrow-right"></i> Home
</a>
<a href="Home.html" class="link">
<img src="Icon/long-arrow-alt-right-solid.svg" class="icon" /> Home
</a>
<a href="Home.html" class="link">
<img src="Icon/long-arrow-alt-right-solid.svg" class="icon" style="vertical-align:middle;" /> Home
</a>
</div>
</body>
</html>
First, add this to .link:
display: flex;
align-items: center;
justify-content: center;
Then, add this to .leftDiv:
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
Your code should look like this:
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
margin-right: -12px;
}
.link {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
text-decoration: none;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.leftDiv {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
width: 200px;
height: 100%;
background-color: lightgray;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}
Here is a complete guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think the problem can be fixed by using padding-bottom for the icon:
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
padding-bottom: 5px;
margin-right: -12px;
}
The padding-bottom can then be added or subtracted based on the amount of padding you may need to vertically align the elements.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The task was to make up the following layout:
And I did it. But when I tried to add text to the blocks, I catch this problem:
The positioning of the elements is broken, I cant understand what is the reason. The code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>
CSS
/* Content */
.content {
width: auto;
height: auto;
margin: 20px;
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
}
.attachment {
display: inline-block;
width: 600px;
height: 700px;
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
I also tried to remove the second block of the attachment and then the elements were located correctly. I know there are many other ways to make up this layout. But I realy want know what is the reason of this bug. I need help with my problem.
You can use this code but you can read this to solve your problem
w3schools
.content {
width: auto;
height: auto;
margin: 20px;
display:flex;
align-items:center
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
}
.attachment {
width: 600px;
height: 700px;
display: flex;
flex-direction: column;
justify-content:space-between
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>
You can add vertical-align property to your .main element
/* Content */
.content {
width: auto;
height: auto;
margin: 20px;
}
.main {
display: inline-block;
width: 600px;
height: 700px;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-right: 150px;
text-align: center;
vertical-align: top;
}
.attachment {
display: inline-block;
width: 600px;
height: 700px;
}
.attachment .first {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
margin-bottom: 10%;
text-align: center;
}
.attachment .second {
display: inline-block;
width: 60%;
height: 45%;
border-radius: 5%;
border: 2px solid #849942;
background: #8aab26;
text-align: center;
}
.description {
position: relative;
font-size: 1.5em;
top: 45%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section class="content">
<div class="main">
<code class="description"><Section></code>
</div>
<aside class="attachment">
<div class="first">
<code class="description"><Aside 1></code>
</div>
<div class="second">
<code class="description"><Aside 2></code>
</div>
</aside>
</section>
</body>