This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
we would like to center an html component.
The situation now:
.card{
width: 400px;
border: 3px solid #54722b;
left: 0;
right: 0;
margin: auto;
margin-top: 20px;
}
.card-header{
background-color: rgb(221, 211, 123);
}
.card-header h3{
color: white;
}
<div class="card">
<div class="card-header">
<h3>Title</h3>
</div>
<div class="card-body">
<div class="form-group">
<form (ngSubmit)="register()">
<div class="input-group form-group">
<input name="name1" class="form-control">
</div>
<div class="input-group form-group">
<input name="name2" class="form-control">
</div>
<div class="input-group form-group">
<input name="name3" class="form-control">
</div>
<div class="input-group form-group">
<input name="name4" class="form-control">
</div>
<div class="input-group form-group">
<input name="name5" class="form-control">
</div>
<div class="input-group form-group">
<input name="name6" class="form-control">
</div>
</form>
</div>
</div>
</div>
We tried: (but it didn't work)
To add to the .card in the css file, the line:
position: fixed;
This line of code centered the component, but when we zoomed in, it was not possible to scroll the screen and see the entire component.
How to center the html component, so that after zooming in, it will be possible to scroll the screen?
You can try these codes.
See to big screen: https://codepen.io/en0ndev/pen/bGgqpPm
body {
height:5000px;
}
.card_main {
position:fixed;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
}
.card{
width: 400px;
border: 3px solid #54722b;
left: 0;
right: 0;
margin: auto;
margin-top: 20px;
}
.card-header{
background-color: rgb(221, 211, 123);
}
.card-header h3{
color: white;
}
<body>
<div class="card_main">
<div class="card">
<div class="card-header">
<h3>Title</h3>
</div>
<div class="card-body">
<div class="form-group">
<form (ngSubmit)="register()">
<div class="input-group form-group">
<input name="name1" class="form-control">
</div>
<div class="input-group form-group">
<input name="name2" class="form-control">
</div>
<div class="input-group form-group">
<input name="name3" class="form-control">
</div>
<div class="input-group form-group">
<input name="name4" class="form-control">
</div>
<div class="input-group form-group">
<input name="name5" class="form-control">
</div>
<div class="input-group form-group">
<input name="name6" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
.card{
width: 400px;
border: 3px solid #54722b;
left: 0;
right: 0;
margin: auto;
margin-top: 20px;
display: flex;
justify-content: center;
}
.card-header{
background-color: rgb(221, 211, 123);
}
.card-header h3{
color: white;
}
<div class="card">
<div class="card-header">
<h3>Title</h3>
</div>
<div class="card-body">
<div class="form-group">
<form (ngSubmit)="register()">
<div class="input-group form-group">
<input name="name1" class="form-control">
</div>
<div class="input-group form-group">
<input name="name2" class="form-control">
</div>
<div class="input-group form-group">
<input name="name3" class="form-control">
</div>
<div class="input-group form-group">
<input name="name4" class="form-control">
</div>
<div class="input-group form-group">
<input name="name5" class="form-control">
</div>
<div class="input-group form-group">
<input name="name6" class="form-control">
</div>
</form>
</div>
</div>
</div>
Is this what you are trying to achieve?
body {
display:grid;
justify-content:center;
}
.card{
width: 400px;
border: 3px solid #54722b;
margin-top: 20px;
}
.card-header{
background-color: rgb(221, 211, 123);
}
.card-header h3{
color: white;
}
<div class="card">
<div class="card-header">
<h3>Title</h3>
</div>
<div class="card-body">
<div class="form-group">
<form (ngSubmit)="register()">
<div class="input-group form-group">
<input name="name1" class="form-control">
</div>
<div class="input-group form-group">
<input name="name2" class="form-control">
</div>
<div class="input-group form-group">
<input name="name3" class="form-control">
</div>
<div class="input-group form-group">
<input name="name4" class="form-control">
</div>
<div class="input-group form-group">
<input name="name5" class="form-control">
</div>
<div class="input-group form-group">
<input name="name6" class="form-control">
</div>
</form>
</div>
</div>
</div>
The issue might be on the parent container of .card. You have a margin of auto, which should center the div inside the parent div. Check the margins with inspector to see which container is causing the issue.
Use FlexBox styling:
display: flex property.
Once the container is flex container you can align the content centrally using
align-content: center // along the cross axis, other possible values flex-start, flex-end
justify-content: center //along the main axis
.card {
display: flex;
align-items: center;
justify-content: center;
}
Add margin:0 auto to css for .card
Or use center tags
Related
Since the column sizing is relative, I assume it would fit everything into one row, especially with the prepend. I am including the relevant part of the HTML, along with my custom CSS styling in case it applies. I tried changing input display to inline, to no avail. Not sure what else may be causing this, I'm not that familiar with Bootstrap.
HTML
<div class="products">
<div class="form-group row">
<label for="rioVerde" style="border: 1px white solid" class="col-sm-6 col-form-label">Rio Verde Hot Sauce</label>
<div class="col-sm-6" style="border: 1px white solid">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">$8</span>
</div>
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Diablo Rojo Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Mango Bolero Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">"Hot Like Me" Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Pickled Red Cabbage</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
x $6.00
</div>
</div>
</div>
... CSS:
html, body {
height: 100%;
color: white;
}
body{
background: rgb(252,230,214);
background: linear-gradient(41deg, rgba(252,230,214,1) 0%, rgba(214,247,247,1) 100%);
background-image: url("/images/bg1.jpg");
background-position: fixed;
background-repeat: none;
background-size: cover;
}
#form {
max-width: 800px;
height: auto;
margin: 20px auto;
}
.container-fluid{
margin: 20px auto;
}
.display-3{
color: white;
margin: 10px auto 0px;
text-align: center;
}
.card{
background-color: rgba(55,55,55,0.5);
backdrop-filter: blur(10px);
}
label{
font-weight: bold;
text-decoration: underline;
}
.products{
margin: 50px 0;
}
input{
display: inline;
}
Your row is set to use display: flex, but this only applies to it's direct children. Your input, prepend and the text are in another div (with class col-sm-6) so the flex properties are bring applied to them.
You can add the flex property to the inputs' parent (i.e. the col-sm-6 divs) to make this work as follows:
.form-group > div {
display: flex;
flex-wrap: wrap;
}
This selects the direct children of the form-groups that are divs, but you could add a class to the input container to make it easier (and less prone to picking up the wrong elements).
You will then need to add any space you want between the input and its prepend and text, e.g.:
.products .form-group input {
display: inline-block;
/* add space after the input to separate it from the text */
margin-right: 5px;
}
Working Example:
.products .form-group div {
display: flex;
flex-wrap: wrap;
}
.products .form-group input {
display: inline-block;
/* add space after the input to separate it from the text */
margin-right: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="products">
<div class="form-group row">
<label for="rioVerde" style="border: 1px white solid" class="col-sm-6 col-form-label">Rio Verde Hot Sauce</label>
<div class="col-sm-6" style="border: 1px white solid">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">$8</span>
</div>
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde">
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Diablo Rojo Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde"> x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Mango Bolero Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde"> x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">"Hot Like Me" Hot Sauce</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde"> x $8.00
</div>
</div>
<div class="form-group row">
<label for="rioVerde" class="col-sm-6 col-form-label">Pickled Red Cabbage</label>
<div class="col-sm-6">
<input type="number" class="form-control col-4" id="quantityVerde" aria-describedby="quantityVerde" placeholder="0" name="quantityVerde"> x $6.00
</div>
</div>
</div>
So I have bootstrap downloaded and have the following piece of code.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-3 ">
<image alt="here will be the logo" src=""></image>
</div>
<div class="col-sm-6 ">
</div>
<div class="col-sm-3">
<form class="form-horizontal" >
<div class="form-group row">
<label class="control-label col-sm-4" for="document">Document:</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="revision">Revision:</label>
<div class="col-sm-8">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="pagenr">Page nr:</label>
<div class="col-sm-8">
<input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="iso">ISO:</label>
<div class="col-sm-8">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
Here is the result i get : web page
Now what interests me is 1. the alignment of text inside the forms (for some reason label is positioned higher than the input) and 2. the huge right margin which does not go away whatever i try to do and eats away input space. On a sidenote it's also interesting that making input field 'readonly' makes it perpetually gray.
Here is my css code:
input.form-control{
width: 80%;
padding: 15px 22px;
margin: 5px 5px;
box-sizing: border-box;
font-size: 14px;
height: 10px;
border:0;
background-color: #FFEBCD;
}
header {
padding-top: 20px;
height: 100px;
font-size: 14px;
}
div.container
{
margin-right: 1px;
margin-left: 100px;
padding-right: 1px;
border-right: 1px;
}
div.form-group
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
form.form-horizontal
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
vertical-align: bottom;
}
div.row
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
label.control-label
{
width: 100%;
vertical-align: baseline ;
background-color: CadetBlue;
text-align: left;
}
So none of the vertical or text alignment attributes seem to work nor setting 'right margin' = 1px to any element I can think of.
The Html code I provided only covers the first form, since the whole code would just be twice as big and the problem is obviously the same with second form.
I've edited their code. I hope it's the way you wanted it to be. It's really complicated wrote.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-4 ">
<image alt="here will be the logo" src=""></image>
</div>
<!-- <div class="col-sm-6 ">
</div> -->
<div class="col-sm-8">
<form>
<div class="form-group row">
<label class="col-form-label col-sm-2" for="document">Document:</label>
<div class="col-sm-10">
<input type="email" class="form-control " id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="revision">Revision:</label>
<div class="col-sm-10">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pagenr">age nr:</label>
<div class="col-sm-10">
<input class="form-control" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="iso">ISO:</label>
<div class="col-sm-10">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
Ok,so i did fix the text misallignment by juggling line-height of both form elements until they looked good enought. When you colour the boxes you still see the misalignment though. And right margin was so big because the left was too small if that makes sense
I have a bootstraap form where two field I have added the class .d-inline-block so that it comes next to each other and I have another field where I have not added the class so that It comes below of the two field.
I want this to be in the center of the div which I am not able to do it. Only the first two fields are coming to center but not the last div.
Can someone point out the mistake?
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/97avbgsq/
Add a class to the third DIV and give that display: inline-block;:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.x {
display: inline-block;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message x">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/tyuxpzk9/1/
While you're free to create your own custom CSS classes to control form field sizes and position, I would like to suggest using the built in grid system column classes to control the size and position of the input fields.
Bootstrap 4 Grid System
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<form>
<div class="row">
<div class="form-group col-sm-4 offset-sm-2">
<input type="text" class="form-control" id="nameInput">
<label class="d-block text-center" for="nameInput">Name</label>
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
<div class="row">
<div class="form-group col-sm-8 offset-sm-2">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
</form>
Using bootstrap 4, you can use the helper classes .d-flex .flex-wrap .justify-content-center on the parent.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass d-flex flex-wrap justify-content-center">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
But if you want to use your original code, to horizontally center a block element with a width, use margin-left: auto; margin-right: auto or margin: auto for short if that works for you. You can also do that using the .mx-auto bootstrap helper class.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message mx-auto">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
I am making a form inside of jumbotron and for some reason I get it to look good on desktop view but when viewing it mobile it goes out of the jumbotron. I am using netbeans to do my coding. I even use #media (max-width: 620px). I tried using google but failed :(
#wrapper{
width: 500px;
height: 700px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
form{
color: black;
text-align: center;
}
div{
clear: both;
}
#off{
background-color: rgba(225,0,0,.85);
color: white;
width: 525px;
height: 140px;
font-size: 1rem;
text-align: center;
}
.formHeader{
color: #104c8b;
}
.formFooter{
background-color: rgba(0,0,255,.5);
color: white;
margin: 65px 0 0 0;
}
#media(max-width: 620px) {
#wrapper{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row text-center">
<div id="wrapper"><p>Contact Form</p>
<div class="formHeader">
</div>
<form action="test.html" method="get" name="test" id="myForm">
<label>Name</label><input name="name" type="text" /><br>
<label>Email</label><input name="email" type="text" /><br>
<label>Phone</label><input name="number" type="text" /><br>
<input type="submit" value="Send"/>
</form>
<div class="formFooter">
</div>
</div>
</div>
</div>
</section>
Given that you're using Bootstrap as a framework it seems a shame not to make use of all of well... the framework. With some restructuring of your HTML (to make use of Bootstrap's responsive classes and form controls) you can easily achieve the responsiveness you desire.
Most of it is just adding the necessary .col-*-* for grid layouts, and of course applying Bootstrap classes to your input and label elements, etc. An example Bootply is below though the code is significantly altered to better-reflect Bootstrap's Framework and modern input classifications (like tel or email, etc).
http://www.bootply.com/mPNCZyXbbD
The HTML:
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper text-center">
<p>Contact Form</p>
<form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input name="number" type="tel" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
And the CSS:
.form-wrapper {
padding: 15px;
background: rgba(255,255,255,0.75);
}
Trying to put three of my first forms in the center of the container and put the last two forms next to the first three. Trying to use float, but that didn't work.
Any help is much appricieted:
bootply: http://www.bootply.com/125841
How I want it to look:
Ok.
you put everything inside a div with class="everything".
.everything {
overflow: auto;
width: 600px;
margin-left:auto;
margin-right:auto;
}
then you put the first three group of textfields in a class called .blocks and the other three groups of textfields and button in another div called .blocks too.
.blocks {
width: 50%;
float:left;
}
here you are fella:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" role="form">
<div class="block">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password1</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
<div class="block">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password2</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password3</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button id="onlyButton" type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
css:
.jumbotron {
/* display: inline-block; */
margin-bottom: auto;
margin: 0 auto;
min-height: 623px;
}
.block {
width: 50%;
float: left;
}
.container {
min-height: 530px;
/* set border styling */
border-color: black;
border-style: solid;
border-width: 1px;
width: 600px;
margin-right:auto;
margin-left:auto;
overflow:auto;
/* set border roundness */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 0 auto;
width: 800px;
/* display: inline-block; */
background-color: white;
}
.form-horizontal {
padding-right: 150px;
}
.form-control {
width: 100px;
margin-left: 30px;
}
#onlyButton {
float:right;
}