I'm creating a website, and I have a login-field that contains two inputs. I want to vertically align those items inside the DIV.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instagram tweaks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>INSTATWEAKS</p>
</header>
<div class="loginbar">
<input type="text" name="username" id="username" class="input">
<input type="password" name="password" id="password" class="input">
</div>
</body>
</html>
And the CSS:
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: block;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
header {
width: 100%;
height: 50px;
text-align: center;
background-color: #111;
position: absolute;
top: 0;
}
body {
margin: 0;
padding: 0;
}
.input {
font-size: 22px;
vertical-align: text-top;
text-align: center;
}
p {
font-size: 30px;
color: lightblue;
margin-top: 10px;
font-weight: bold;
}
I want the inputs inside the div with the class 'loginbar' to be vertically centered
Use diplay: flex
https://codepen.io/Czeran/pen/mMWNwP
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
You need to wrap your input fields in a container element, and then use flexbox to vertically align and center the container:
.loginbar {
display: flex;
align-items: center;
justify-content: center;
...
}
JSFiddle demo: https://jsfiddle.net/092215c2/1/
Since you have a set height for .loginbar, you could give it a line-height with the same value, then give .input { vertical-align: middle; }.
And just in case you want to horizontally align, add another div to your html around the two inputs. Give this div a set width, I went with 530px, that is about what the two inputs beside each other are, then give the div margin: 0 auto;
With this, the inputs are centered entirely.
Remove code to achieve what you want.
Best,
Levi
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: block;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
line-height: 400px;
}
header {
width: 100%;
height: 50px;
text-align: center;
background-color: #111;
position: absolute;
top: 0;
}
body {
margin: 0;
padding: 0;
}
.center {
width: 530px;
margin: 0 auto;
}
.input {
font-size: 22px;
text-align: center;
vertical-align: middle;
}
p {
font-size: 30px;
color: lightblue;
margin-top: 10px;
font-weight: bold;
}
<header>
<p>INSTATWEAKS</p>
</header>
<div class="loginbar">
<div class="center">
<input type="text" name="username" id="username" class="input">
<input type="password" name="password" id="password" class="input">
</div>
</div>
.textField-center {
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
}
OR
.textField-center {
justify-content: center;
}
USE This CSS
Related
I'm trying to figure out how to make it look like this (the white box at the end of both sides is basically the continuation of the search-box):
I tried different ways to make it equally long on both left and right sides (to center it under my title) but unfortunately it always resulted in failure. The left side didn't move and the right side just became wider.
I'm looking as well for a way to add some space between the arrow icon and the right border of the search-box. I tried adding some padding but it didn't work.
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
https://codepen.io/686579/pen/zYJYPWB
You are trying to make the search bigger than the nodes/elements that contain it.
Make sure to set the width of the containing components to something bigger.
To center using display: flex;, you can set a container to use flex, and then use margin: auto; in the child element to automatically center with the containing-flexed-element.
Here is updated html that gives a class to each container. Notice I added class="search-background" so I can give that element a width.
example.html
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search-background" style="background-color: white;">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</div>
</section>
Here is updated css with display flex on all containing elements (and flex direction of column so that things are displayed vertically, display flex defaults to horizontal)
Containers have display: flex;, centered items have margin: auto;
You can customize the actual widths of each element to your desire. Use margin to adjust the element right or left. margin "auto" just tells it to fill the difference between the parent and child element's width.
example.css
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
width: 100%;
display: flex;
border: 1px solid green;
}
.help {
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid red;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
width: fit-content;
margin: auto;
}
.search-background {
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
}
.search {
position: relative;
display: flex;
width: 100%;
margin: auto;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
Here's a screenshot of it on my machine. The red border is only there to help visualize the container needed to be adjusted.
You may add this rule to the .search container:
.search::before {
position: absolute;
width: calc(100% - (2 * 3em));
height: var(--height);
padding: var(--padding);
content: '';
left: 50%;
transform: translateX(-50%);
background: white;
z-index: 1;
}
So that you have a pseudo element bound to the <input> container that will be positioned absolute while having width: 100% minus an arbitrary amount being your padding.
I also zeroed the padding/margin on html, body and used custom variables to hold the padding and height you are using on your input so that it will be replicated on the pseudo element.
This long route was required to have a separated element to style with different criteria using css alone.
html, body{
padding: 0;
margin: 0;
}
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
--height: 45px;
--padding: 5px;
width: 100%;
/*position: relative;*/
display: flex;
}
.searchTerm {
height: var(--height);
padding: var(--padding);
z-index: 2;
width: 100%;
border: 1px solid #000000;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
.search::before {
position: absolute;
width: calc(100% - (2 * 3em));
height: var(--height);
padding: var(--padding);
content: '';
left: 50%;
transform: translateX(-50%);
background: white;
z-index: 1;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
I added a div before searchbar with an inline CSS to let you see what I added, and deleted width: 100% in searchbar. That is why it was not centered
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
padding: 0 50px;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url("https://svgur.com/i/qJh.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div style="background-color: white;">
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</div>
</section>
You can change your input width for 80% instead 100% and use justify-content to center the input and for adding a white space in your bg-input try using percentages instead right. If you want to know more about it check how to use background-position.
.help-container {
padding: 5rem 0;
display: grid;
place-content: center;
background-color: #dadbf1;
}
h1 {
font-size: 5rem;
font-weight: 500;
padding-bottom: 2rem;
}
.search {
width: 100%;
position: relative;
display: flex;
background-color: white;
justify-content: center;
}
.searchTerm {
width: 80%;
border: 1px solid #000000;
padding: 5px;
height: 45px;
border-radius: 0.25rem;
outline: none;
color: #9dbfaf;
font-size: 1rem;
background-image: url('https://svgur.com/i/qJh.svg');
background-repeat: no-repeat;
background-position: 95% center;
background-size: 30px;
}
<section>
<div class="help-container">
<div class="help">
<h1>How can we help?</h1>
<div class="search">
<input type="text" class="searchTerm" placeholder="Search" />
</div>
</div>
</div>
</section>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've recently started doing frontend and I've run into a bit of a problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
You can run the code here. The problem is with aligning the red buttons with the navbar (header). The buttons are supposed to stretch from the top to the bottom of the navbar, but they aren't aligned to the top. This is caused by the head-title element. If the font size is set to 1em, then the problem disappears. Why is this happening? Any help is appreciated.
Set vertical-align: top; on the .head-button:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Try adding vertical-align: top; to .head-button class so the blocks will be aligned to top.
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
Try using display:flex css property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
align-items: center;
}
.head-title {
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
margin-right: 8px;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
</style>
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
Try to use modern solution and !coding not a property such display: inline-block or vertical-align: top that almost is old and obsolete, in this case when you want to put element side by side and align them in a certain row you can use flex on their parents like below example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
With flex you can control parent and also child alignments! something like justify-content: center; or align-items: center;
Try this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
/** My Code **/
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
width: 260px;
height: auto;
margin: 0 10px;
vertical-align: middle;
}
.head-button {
display: inline-block;
width: 80px;
line-height: 2.5em;
background-color: red;
text-align: center;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.
I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 5vw;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
You can use margin:auto to get this fixed.
Add a class .center-items to the parent a tag of the image with the following properties :
.center-items > img,p {
display : block;
margin : auto ;
}
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 50px;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
.center-items > img,p {
display : block;
margin : auto ;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#" class="center-items">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
it may work.. plz modify the css code..
css
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behaviour on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu-card {
margin: 0px;
text-align: center;
}
Thanks to #TheVigilant for putting me on the right path:
.menu-icon-container a {
width: auto;
vertical-align: top;
display: inline-flex;
justify-content : center;
}
.menu-icon-container > img, p {
margin: auto;
display: block;
}
Simple question really. If I use height: 100px the cursor is still starting in the middle of the input box. I'd like to use the entire box with the cursor starting at the top left to make a more intuitive paragraph writing experience.
I'm simply making a form. When I add width: ***px; you can type to the edge of the extended input box however the same doesn't happen for height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}
<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}
<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}
<textarea name="comments" rows="8"></textarea>
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
HTML
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="logos/google.png" alt="youtube" class="logos">
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>