I have tried to center this vertically in body (not horizontally). Also, I do not want to specify heights or anything like that. I tried adding a wrapper with a 100% height and other things, but got nowhere. Can you please help me fix this?
jsFiddle Here
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
<input type="text" placeholder="Email"/><br>
<input type="text" placeholder="Username"/><br>
<input type="password" placeholder="Password"/><br>
<button type="submit">Next</button>
</form>
See this edited version of your jsFiddle.
Basically, just wrap your content in <div class = "main"><div class = "wrapper"></div></div>, and add the following CSS:
html, body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
If you have flexbox available, you can do it without using display: table;
Code example:
html,
body {
height: 100%;
width: 100%;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
<html>
<body>
<div class="container">
<div class="content">
This div will be centered
</div>
</div>
</body>
</html>
Ta-da! Vertically and horizontally centered content div. JSFiddle: https://jsfiddle.net/z0g0htm5/.
Taken mostly from https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ and https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Update: codesandbox.io
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
<input type="text" placeholder="Email"/><br>
<input type="text" placeholder="Username"/><br>
<input type="password" placeholder="Password"/><br>
<button type="submit">Next</button>
</form>
Related: Center a div in body
this worked for me:
Style.css
div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I found this code snippet here.
You can indeed center vertically and horizontally the single container without a wrapper. The key is to understand what 100% height and width mean. It means the percentage of the parent element. You must chain percentages upward the hierarchy until you hit the actual viewport height and width.
HTML Element <---> BODY Element <----> DIV Element
100% of height in the DIV looks up the height of BODY, which in turn looks up the height of HTML, which in turn looks up the size of the viewport. In order for it to work properly, you cannot combine HTML and BODY in CSS, but rather address them separately.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<html>
<body>
<div>
Center me!
</div>
</body>
</html>
A JSFiddle example with table warp
In the above solution, Provide css for html & body with "height: 100%" and then wrap the form that to be centered around a table.
Code sample
<html>
<body>
<table height="100%" width="100%" border="1">
<tr>
<td>
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
<input type="text" placeholder="Email"/><br>
<input type="text" placeholder="Username"/><br>
<input type="password" placeholder="Password"/><br>
<button type="submit">Next</button>
</form>
</td>
</tr>
</table>
</body>
</html>
css:
width : 200px;
margin 0 auto;
Related
I cannot figure out why my container (main-container) background is not stretching with the content inside. It looks like the container background is stuck on initial view height. When I scroll pass the initial view height, the rest of it is white.
Here is the css
.main-container {
margin: 0;
padding: 0;
font-family: 'montserrat';
height: fit-content;
}
.main {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: greenyellow;
border-radius: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
<div class="main-container">
<div class="main">
<h1>Signup</h1>
<form method="POST">
<div class="txt-field">
<input type="text" required>
<span></span>
<label>First Name</label>
</div>
<h1>Upload Image</h1>
<button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
<input type="submit" value="Signup">
</form>
</div>
</div>
This is what it looks like initially.
This is what it looks like when I scroll down
The reason is that you have position: absolute on your .main class - any elements positioned absolutely will be taken out of the regular document flow and will have no effect on the layout of their parent(s).
It looks like you are using absolute position to try and center the .main element. Have you considered using a flexbox on .main-container instead? Using a flexbox with justify-content: center and align-items: center is an easy way to center an element inside its parent while keeping the regular document flow.
I'm looking to create the desired styling in the photo shown. Having trouble getting the custom SVGs I created to be inline with the text field. How would I go about creating this effect?
Here's a snippet of the code I'm using at the minute, where am I going wrong?
I'm mostly using the JQM library if that is of any help.
<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
<img src="img/icon/regicons/usernumber.svg">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Ensure that the <input/> has the same height as your <image/> and position it at top of it's parent element.
height: 32px; box-sizing: border-box;
absolute; top: 0;
Snippet:
input {
height: 32px;
box-sizing: border-box;
position: absolute;
top: 0;
}
.box2 {
display: inline-block;
position:relative;
width: 40vw;
}
<div class="box2" style="">
<img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
<input type="text" name="userNo" id="userNo" placeholder="Number" required>
</div>
I would use a flexbox, which is responsive by nature.
.box2 {
display: flex;
background-color: lightgrey;
align-items: center; /* Vertical alignment */
}
<div class="box2" style="position:relative; width: 40vw;">
<img src="https://via.placeholder.com/50x50/00ff00">
<input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>
Sorry, I know this is super basic but I've been through my coding reference books all day and I think my mind's a little buggered. I need to get BOTH the input field AND the "submit" button in one line, in the center of the page, similar to Google.
.logo {
width: 50%;
display: block;
margin: auto;
}
.input-fields {
padding: 3%;
width: 40%;
display: block;
margin: auto;
font-size: 90%;
}
.submit {
padding: 3%;
width: 15%;
}
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything...">
<input class="input-fields submit" name="find" type="submit" value="Find">
</form>
</div>
The problem I'm getting is that the button is stacking underneath the text-field. What am I missing out?
Well Google has it vertically and horizontally aligned so you should try something like this (simplified version):
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
.align-me {
display: flex;
flex-direction: column;
align-items: center;
}
.align-me > .form-wrapper > .center {
display: flex;
}
<div class="align-me">
<header>
<img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="...">
<input class="input-fields submit" name="find" type="submit" value="Search">
</form>
</div>
</div>
But their design is not responsive and this is.
What you are seeing is the default behaviour of display:block.
Using display:inline-block will make them block elements so you can add padding, etc, but make them inline so they will appear beside each other (assuming they fit, and other styles don't change the default behaviour).
Just change the display from block to inline-block in your CSS here:
.input-fields {
[...]
display:inline-block;
}
Working snippet:
.logo {width: 50%; display:block; margin:auto;}
.input-fields {
padding:3%;
width:40%;
display:inline-block; /* change this from block to inline-block */
vertical-align: middle; /* this will help with any vertical alignment issues */
margin:auto;
font-size:90%;
}
.submit {
padding:3%;
width:15%;
}
/* Add this this to center your inputs -
you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}
<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
<div class="form-wrapper">
<form class="center">
<input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
<input class="input-fields submit" name="find" type="submit" value="Find"/>
</form>
</div>
You are missing a
display: inline-block;
on the elements you want to display in line. You currently have 'display: block;' This will push elements on to there own line.
You may also want:
vertical-align: middle;
To make them vertically aligned relative to each other.
To make sure they both stay dead center in the page put them all in a container (or just use your existing form container) and style it like:
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
This will ensure no matter what the screen size is the container is in the middle both vertically and horizontally.
I've got the following landing page form (I've cut all the unnecessary stuff I don't think matters leaving only minimum of style). Here is the code (I'm using Bootstrap 3.3.5):
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</form>
<div class="center-block app-link some-img"/>
</div>
..and css
.image-hover {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.7) !important;
position: absolute;
z-index: 100;
color: #cccccc;
margin: 0 auto;
left: 0;
right: 0;
border-radius: 25px;
}
.landing-page-form-group {
padding-top: 16px;
padding-bottom: 16px;
}
.landing-page-label {
width: 100px;
vertical-align: middle;
}
.landing-page-input {
width: 150px;
display: inline-block;
}
.app-link {
width: 300px;
height: 300px;
background-size: 100% 100%;
border-radius: 25px;
}
.some-img {
background-image: url("http://dl.hiapphere.com/data/icon/201511/HiAppHere_com_com.ludicside.mrsquare.png");
}
I want to center all the form inputs and etc vertically. I've tried such things as playing with position (relative on parent, absolute on child), vertical-align, top, maybe something else I don't remember right now as I spent lots of hours trying.
I'm not a great specialist in frontend development (I mean html/css) so I will be extremely happy to see understanding although the problem seems to be basic enough.
Thank you for any ideas!
updated
check the solution without flex demo here
Try this
check demo here
add the following styles to your existing .image-hover class
CSS:
.image-hover {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
Simplest method would be to use
.image-hover {
display: flex;
align-items : center;
justify-content: center;
}
The align-items takes care of vertical centering, and justify-contents, the horizontal centering.
This is my solution:
https://jsfiddle.net/0x9epxah/1/
add div .inner-form:
<div class="col-md-6 app-door">
<form class="image-hover text-center">
<div class="inner-form">
<h3>Application name</h3>
<div class="landing-page-form-group">
<label class="landing-page-label">Label: </label>
<input class="form-control landing-page-input">
</div>
<button class="btn">Submit</button>
</div>
</form>
<div class="center-block app-link some-img"/>
</div>
and this css class:
.inner-form {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
I have a page that looks like this jsfiddle, code below:
html:
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
css:
.parent { width: 500px; }
.child { width: 100%; }
How do I get it so that together they take up 100% of the parent div width (with the text input stretching accordingly)?
To clarify: I want the button(s) in a row to be fixed width and the input to take up the remaining width of the parent so that together the width = parent width. In the case that there are no button in the row, I'd like the textinput to take up the whole width.
.parent { width: 500px; margin:auto; }
.child { width: 100%; }
add this to make input stretches to full width
.child input { width: 100%; }
There are many ways to do this. One way to do this is to use the display:table-x attribute.
If you wrap the input elements in a div of their own like so:
<div class="parent">
<div class="text">
<input type="text" />
</div>
<div class="button">
<input type="submit" />
</div>
</div>
Then style the parent as display:table, the wrapper div's as display:table-cell, and give a width to div.button, like so:
.parent {
width: 500px;
background-color:blue;
display:table;
}
.text {
display:table-cell;
}
.text input {
width:100%;
-webkit-appearance:none;
}
.button {
display:table-cell;
background-color:red;
width:100px;
}
Then you can achieve the result you are looking for: http://jsfiddle.net/QpCCD/9/
This is similar to #panindra's post, but it keeps both inputs on the same line.
I've added some color to the sample to be able to see the position on the screen.
<html>
<head>
<style type="text/css">
body { background-color: black; }
.parent { width: 500px; background-color: white; text-align: center; }
.child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; }
.child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
</body>
</html>
Actually, this would be closer:
.child input { width: 248px; }