Hola chicos! in this ocasion im putting the search bar and uhm, im triying with each element that i’been searching on internet (align-items, justify-content…) but i can´t put the search bar in the middle; can someone give me a hand on this and explain me why it doesnt work?
THE HTML CODE:
<div class="barrabusqueda">
<form class="formulariodebarra" action="#" method="POST">
<div class="inputdebarra">
<input class="" type="search" placeholder="">
</div>
<div>
<input class="botonclick" type="submit" value="Buscar con Google"/>
<input class="botonclick" type="submit" value="Me siento con suerte"/>
</div>
</div>
</div>
</form>
</div>
THE CSS CODE:
.barrabusqueda{
padding: 10 40px 10 25px;
position: center;
margin: 0 auto;
padding-top: 6px;
height: 600px;
align-content: center;
align-items: center;
}
.barrabusqueda, .formulariodebarra, {
width: 200px ;
height: 50px;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
justify-content: center
}
.formulariodebarra{
overflow: hidden;
position: relative;
@pabloeoliveros ¡Hola hermano!, I belive you need to set the width in pixels on barrabusqueda to something like 600px and make sure the parent div has width 100%.
You have set ‘margin: 0 auto;’ but the div does not know how to auto align itself since the width is not set.
1 Like
My brother, thx for the sharing but it doesnt work. Maybe its a trouble with the html dont you think? 
<div class="barrabusqueda">
<form class="formulariodebarra" action="#" method="POST">
<div class="inputdebarra">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit">Submit</button>
</form>
</div>
<div class="buttons">
<input class="botonclick" type="submit" value="Buscar con Google" />
<input class="botonclick" type="submit" value="Me siento con suerte" />
</div>
</form>
</div>
CSS
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.inputdebarra{
float:center;
margin:auto;
padding:auto;
text-align:center;
}
.buttons{
text-align:center;
}
Sorry, what? i don 't understand…
I have corrected slightly Html and used “float” in CSS , the field search is centered, do you want it to be centered inside buttons or on the page?
@pabloeoliveros Esto es mejor. Creo que este codigo es lo que buscabas.
Escriba el HTML así.
<div class="barrabusqueda">
<form class="formulariodebarra" action="#" method="POST">
<div class="inputdebarra">
<input class="" type="search" placeholder="">
</div>
<div>
<input class="botonclick" type="submit" value="Buscar con Google" />
<input class="botonclick" type="submit" value="Me siento con suerte" />
</div>
</form>
</div>
Y el CSS así.
.barrabusqueda {
width: 500px;
border: solid;
margin: 0 auto;
height: 200px;
}
.formulariodebarra {
display: flex;
flex-direction: column;
width: 100%;
}
input {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto;
border: 1px solid red;
height: 40px;
margin-bottom: .5rem;
}
Hi! well, centered in the page it’s the goal (i mean, like google you know 
)
Brandon! God bless you pal, well i’ve putted all the code as you tell me and it looks “good” in some ways but in others there’s need to re-localize the inputs and image of the right way:
@brandon_wallace It looks like this way
ok, i see, here is the code for html
<body>
<div class="flex-container">
<div class="barrabusqueda">
<form class="formulariodebarra" action="#" method="POST">
<div class="inputdebarra">
<input class="" type="search" placeholder="">
</div>
</form>
</div>
<form>
<div>
<input class="botonclick" type="submit" value="Buscar con Google" />
</div>
</form>
</div>
</body>
and for css
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
color: white;
}
</style>
you can choose what suits you well 
1 Like
Gusak! thanks a lot, in a few minuts i will test that code and ill tell you how it goes 
. But, apart of that; im making the bottons of search and really i want to look well but it seems like in height is a little bit passed away:
This is the code that im using for this:
Wich changes you think that may help ? .
¡hola! would you please share the code on https://codepen.io/?
1 Like
Sure, why not? Its on this page: https://codepen.io/pabloeoliveros/details/QWEJYpR .
PD: I’ve fixed the large of the buttons thx God but, (when you see it) we got a trouble making a divisory line between each botton and making them be
next to each other; not about another
hola! so here is the code, I have changed some classes to make things easier for myself please have a look
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Google Project Repo</title>
<link rel="stylesheet" href="">
<head>
<body>
<style>
body {
margin: 0;
padding: 0;
/* position:absolute; */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
float: right;
}
li a {
display: block;
text-align: center;
padding: 10px 10px;
}
li a:hover {
background-color: aquamarine;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.search {
width: 300px;
box-sizing: border-box;
padding:10px;
margin:2px;
border:solid black 0.2px;
border-radius: 5px;
}
.buttons{
display:flex;
text-align: center;
justify-content: center;
}
button{
box-sizing: border-box;
margin-top:10px;
margin-left:5px;
}
</style>
<ul>
<li>
<a href="#arriba">Gmail </a>
</li>
<li>
<a href="#arriba">Imágenes</a>
</li>
<li>
<a href="#central">Icon</a>
</li>
<li>
<a href="#footer">Profile</a>
</li>
</ul>
<div class="flex-container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo">
<div>
<form action="#" method="POST">
<div>
<input placeholder="Search..." type="text" name="search" class="search">
</div>
<div class="buttons">
<button type="submit" value="Buscar con Google">Buscar con Google</button>
<button type="submit" value="Me siento con suerte">Me siento con suerte</button>
</div>
</form>
</div>
</div>
</body>
</html>
@pabloeoliveros
so what I did: I removed decoration black cicrle for unordered list, then used display:flex for the buttons and logo, and also transform-translate to vertical and horizontal align, instead of two files css and HTML i put everything in HTML file using tag for css
1 Like
GUSAK! thank you for all the support, i used some intersting part of your code, and it works!
1 Like
