Hello I am trying to have three groups of three buttons with each group appearing on a separate line, I managed to achieve this by just grouping them up with divs, however when i use flexbox to position the buttons in the center of the page, all the buttons appear on one line. Is there a way i could use flexbox for my positioning and still be able to have the buttons on separate lines?
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
overflow: hidden;
}
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.options a{
color: inherit;
text-decoration: none;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="options">
<div class="one">
<button>Maths</button>
<button>Computer Science</button>
<button>Physics</button>
</div>
<div class="two">
<button>Chemistry</button>
<button>Biology</button>
<button>Business Studies</button>
</div>
<div class="three">
<button>Philosophy</button>
<button>Geography</button>
<button>History</button>
</div>
</div>
</body>
</html>
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
exemple : https://www.w3schools.com/cssref/css3_pr_flex-flow.asp
Try adding this
flex-flow:column;
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
I'm trying to position the green box in the center of the page but totally unsuccessfully.
I set the body as flex..this should allow me to align the inside container to the center but it doesn't work. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="signup.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://kit.fontawesome.com/5ab317586b.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<div class="container">
<div class="box-1">
<h2>Box1</h2>
<p>This is the box 1</p>
</div>
<div class="box-2">
<h2>Box2</h2>
<p>This is the box 2</p>
</div>
<div class="box-3">
<h2>Box3</h2>
<p>This is the box 3</p>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
CSS
.body{
background-color: black;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.container div {
border: solid red;
padding: 0;
}
.container{
background-color: green;
display: flex;
justify-content: space-around;
}
I want the green box in the middle, what I'm doing wrong?
thanks
you need to assign height in vh and add justify-content: center; to your body css. the following body css will align it to center
.body{
background-color: black;
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
As Anis has mentioned the body need to be assigned a height so there will be space for the centering to work.
This version uses min-height so the page will be able to scale as more content being added later.
body{
background-color: black;
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
the goal is to somewhat recreate google's search bar. What i've got so far:
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="positions.css">
</head>
<body>
<div id="input_field">
<input type="text" name="q">
</div>
<form action="https://google.com/search">
<div class="flexbox-container">
<div class="button_search_pos"><input type="submit" value="Google Search"></div>
<div class="lucky_pos"><input type="submit" value="I’m Feeling Lucky"></div>
</div>
And the .css to that:
I tried several tips of other solved issues on Stackoverflow, but they didn't seem to work. Found some vids on youtube with already finished forms like this, but thats not my way of doing things. How do i center the input over both buttons from the Flexbox? The input must be "flexible" so that when the page shrinks, it wraps accordingly to other elements.
Thanks in advance!
#input_field{
position: absolute;
top: 310px;
left: 41%;
}
.flexbox-container{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}```
[1]: https://i.stack.imgur.com/7SfuF.png
Try this CSS code, i edited your's
body {
text-align: center;
}
#input_field{
width: 50%;
margin: auto;
margin-top: 10%
}
.flexbox-container{
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
}
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}
I want to display a centered image and, below it, a centered and bordered text that has a width equal to its container. I use:
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
text-align: center;
}
.d2 {
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div class="d1">
<img src="smiley.gif"><br>
<div class="d2">This is some text</div>
</div>
</body>
</html>
This works fine but, as I read, the use of <br> is an indication of poor semantic HTML and should be avoided. Is there a way to do this without the use of <br>?
Thanks
Flexbox to the rescue:
.d1 {
display: flex;
flex-flow: column;
justify-content: center;
}
.d2 {
border: 1px solid red;
}
img, .d2{
margin: 0 auto;
}
<div class="d1">
<img src="https://placekitten.com/200/300">
<div class="d2">This is some text</div>
</div>
The semantically correct element to use is the HTML5 figure element ( documentation here ) - this is a block level element and has the figcaption element and the image element contained within it.
The figcaption can be the first child (ie - before the image) or last child (after the image) and is also a block level element and can be centered with css.
<!DOCTYPE html>
<html>
<head>
<style>
figure {
text-align: center;
}
figcaption {
margin-bottom: 10px;
}
</style>
</head>
<body>
<figure>
<figcaption>This is a fluffy kitten</figcaption>
<img src="https://cdn.unifiedcommerce.com/content/product/small/30106.jpg" alt="fluffy kitten" width="100">
</figure>
</body>
</html>
Try using a div to enclose your image. A div is a block element, meaning, it will occupy 100% of the parent width. In your case, if the img tag is inside div, then all contents outside the div will be in the next line automatically.
img {
max-width: 100px;
}
.d1 {
text-align: center;
}
.d2 {
border: 1px solid red;
display: inline-block;
}
<div class="d1">
<div>
<img src="https://demo-res.cloudinary.com/image/upload/sample.jpg">
</div>
<div class="d2">This is some text</div>
</div>
You can try this.Just use margin for the text section instead of <br> tag. And then for positioning both of the image and text to center, use the following property:
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.d2 {
border: 1px solid red;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="d1">
<img src="https://www.w3schools.com/howto/img_snow.jpg">
<div class="d2">This is some text</div>
</div>
</body>
</html>
I want to create following layout, where a header (green) spans the full width of the screen and is made up of two elements:
a picture (pink), that is top-left aligned, and has the height of the next element
a text block (red), that is top-right aligned. It made of two stacked elements: a text div (yellow) and a button. The width button equals the text width.
The expected output is this:
My code is the following:
.header{
background-color: green;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-element{
display: inline-block;
}
.picture_container{
background-color: pink
}
.picture{
height: 100%;
}
.text_container{
background-color: red
}
.text{
background-color: yellow;
}
<div class="header">
<div class="flex-element picture_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png" alt="" class="picture">
</div>
<div class="flex-element text_container">
<div class="text">
AAAAAAAAAA <br>
BBB
</div>
<button type="button" name="button" style="width: 100%">foo</button>
</div>
</div>
and gives following output:
The problem is that there is no "space-between" the pink and the red block, and they are not top aligned. I know I could work around it using css grid, yet I'd like to know why it isn't working.
Question: How to make justify-content: space-between have any effect?
This might be a browser issue. Indeed, I am using Firefox Developer Edition 63.0b14 as a browser.
A hack was then to add display: -moz-box; in the .header css definition. It is strange, though, as "Prefixed property values (such as -moz-box) are no longer needed for flexbox to work in major browsers." (see Michael_B's comment). A less hacky solution would hence be still appreciated.
Full code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style media="screen">
.header{
background-color: green;
display: -moz-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-element{
display: inline-block;
}
.picture_container{
background-color: pink
}
.picture{
height: 100%;
}
.text_container{
background-color: red
}
.text{
background-color: yellow;
}
</style>
</head>
<body>
<div class="header">
<div class="flex-element picture_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Tux_Enhanced.svg/154px-Tux_Enhanced.svg.png" alt="" class="picture">
</div>
<div class="flex-element text_container">
<div class="text">
AAAAAAAAAA <br>
BBB
</div>
<button type="button" name="button" style="width: 100%">foo</button>
</div>
</div>
</body>
</html>
Please try below code
<style>
.header {
padding: 10px;
}
.picture {
width: auto;
}
.text_container {
margin: auto 0;
}
.picture_container {
display: block;
}
</style>
This is a simplified version of a more complex problem. Suppose there are two divs within the body, which have to be vertically centered. Because of some other requirements DOM can't change. So only by changing css I need to vertically align them center. I have tried many other stackoverflow posts but so far couldn't make it work.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
}
.div1{
display: block;
background: red;
width: 300px;
}
.div2{
display: block;
background: green;
width: 300px;
}
</style>
</head>
<body>
<div class="div1">
<p>This is div1</p>
</div>
<div class="div2">
<p>This is div2</p>
</div>
</body>
</html>
This is possible using flexbox.
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
See this CodePen