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;
}
Related
I am pretty new to React.js and flexbox, and I currently have a flexbox with both an h2 and a button that I want to center. Unfortunately, even when I put justify-content: center, margin: auto, and text-align center, the formatting is still now what I'm looking for. I also know that there must be something that I am missing, but I just don't know what right now. Any suggestions would be greatly appreciated.
<header className={styles.header}>
<div className={styles.spacing}></div>
<div className={styles.logoaccount}>
<img></img>
</div>
<div className={styles.spacing}></div>
<div className={styles.searchsearch}>
<h2>Japanese</h2>
<button>Search</button>
</div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.filters}>
<button className="location">Location</button>
<button className="food-type">Food-type</button>
<button className="rate">Rate</button>
<button className="apply-filters">Apply-Filters</button>
</div>
*{
margin: 0;
padding: 0;
}
.header{
text-align: center;
}
.logoaccount{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.logoaccount > button{
border-radius: 5px;
}
.filters{
width: 75%;
display: flex;
margin: auto;
justify-content: space-between;
}
.filters > button{
width: 15%;
}
.searchsearch{
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.spacing{
height: 20px;
}
This is what I get:
however, I want the second line containing Japanese and "Search" to be centered. I tried all over to look for the solution but I unfortunately couldn't find anything. thanks so much!
Edit: background color for clarification.
Have you tried inspecting the page and using the Select Page Item tool (Ctrl+Shift+C) to see if the problem is visible?. If not, just like you did with .filters > button, try adding the width: 15% style (or try other percentages, like 50%) to the .searchsearch > button. Otherwise, maybe using the filters style instead of the searchsearch one in the div's className changes something that makes it work.
Maybe you can help me, I want to center vertically as well as horizonally the buttons side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="icon" type="image/ico" href="Logo.ico">
</head>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<input type="image" src="btn-system-konfiguration-orange.png">
<input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
<input type="image" src="btn-sensor-konfiguration-orange.png">
</div>
</body>
</html>
Do you have any ideas? The solution is probably very simple.
I believe if you use justify-content: space-around; can help with making them line up horizontally.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
}
When you try to align it vertically you would need to use flex-direction: column; I am assuming youre doing this when the screen size is phone size so I would add it to a media query with max 400 or something along those lins
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
add
html,
body {
height: 100%;
}
the html and body need to have height defined in this case.
Working pen: https://codepen.io/vas131/pen/yLgydxN
The R, P, and S end up being stacked on top of each other in a column rather than being side by side.
I've been going through freeCodeCamp and theOdinProject and this issue has come up a few times for me, I usually ended up just assigning each div an ID and using CSS to target it with a 'display: flex.'
I figured I should finally find out why this isn't working so if someone could please explain it to me, I'd greatly appreciate it!
Here's my HTML:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
flex-direction: row;
}
<html>
<head>
<link rel='stylesheet.css' type=text/css href='stylesheet.css'>
</head>
<body>
<div class='keys'>
<div data-key='82' class='key'>
<kbd>R</kbd>
</div>
<div data-key='80' class='key'>
<kbd>P</kbd>
</div>
<div data-key='83' class='key'>
<kbd>S</kbd>
</div>
</div>
</body>
</html>
You don't need the "flex: 1".
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
^ should do it.
If you want to space the items, try justify-content: space-evenly
I'm sure this is a duplicate question but I've eliminated almost everything from my code and still can't get it to work. I am new to Flexbox and tried to follow the code at https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ (as an aside, even that code doesn't work!). I am using Safari 11.1.1 and Chrome 67.0.3396.87 so it's not that they're old browsers.
I'm trying to center a <div> horizontally and vertically on the screen. The div contains a form which contains a couple of inputs and a button. I'm trying to center each of this horizontally and the group should be entered vertically within the <div>.
In Safari,nothing is centred. In Chrome, the div is centred horizontally but not vertically, but the inputs/button are not centred either horizontally and vertically.
body {
background: grey;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: white;
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>
What am I missing? As said, even the sample code from the site mentioned above didn't work correctly, so I'm quite stumped.
You need to set height:100vh in body, or set height:100% on html,body
And center items in forms, use flexbox properties in form instead of #holder
body {
margin: 0;
height: 100vh;
background: grey;
display: flex;
justify-content: center;
align-items: center;
}
#holder {
width: 300px;
height: 300px;
background: white;
}
form {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
form>* {
margin-bottom: 20px
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>
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;