This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
So, I am new at coding. I was trying to make a very basic static webpage of a calculator using html and css and js.
This is the html
#input {
margin: 0 auto;
}
#num {
border-radius: 25px;
background: #73AD21;
display: inline-block;
padding: 15px;
width: 200px;
height: 100px;
}
<body>
<div id="input">
<div id="num">
<label for="num1">Enter the first number</label>
<input type="number" name="num1" id="num1">
</div>
<div id="num">
<label for="num2">Enter the second number</label>
<input type="number" name="num2" id="num1">
</div>
</div>
<div id="op">
<div id="opadd"><input type="submit" name="add" class="add" value="Add" onclick="add()"></div>
<div id="opsbtrct"><input type="submit" name="subtract" class="sbtrct" value="Subtract" onclick="sbtrct()"></div>
<div id="opmult"><input type="submit" name="multiply" class="mult" value="Multiply" onclick="mult()"></div>
<div id="opdvde"><input type="submit" name="divide" class="add" value="Divide" onclick="dvde()"></div>
</div>
</body>
I want that the #num be centered horizontally.
I tried using
margin: auto;
and
margin: 0 auto;
but nothing works. Please help.
I've been at it for hours.
Here is the complicated way of doing this.
You should create a container div, so you can center the object in.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
when you add margin: 0 auto be sure the html tag not inline or inline-block it should be 'block' css with specific width.
#num {
border-radius: 25px;
background: #73AD21;
display: block;
padding: 15px;
width: 200px;
height: 100px;
margin: 1em auto;
}
label{
white-space: nowrap;
}
just replace this code hope your problem will fix.
add white-space:nowrap for the label to use one line text. #num should be 'block' css with specific width like 200px and display block. thanks
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 months ago.
I just designed a simple sign-in form to practice CSS and HTML but I can't align 2 divs horizontally to input my name and surname.
Actually, I can't understand why if I apply a width of 50% they are stuck on top of each other and if I apply 49% width they are perfectly horizontally aligned as I want.
MY CSS (child width 50%):
I'm expecting with the child property set to 50% they should take 50% of the parent space.. but actually not, why?
what I'm doing wrong, why have to reduce the width to 49% to align them horizontally
see my image 50% width:
I want them aligned side by side like here:
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
width: 100%;
}
.child{
width: 50%; <--------- HERE THE ISSUE
display: inline-block;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label><br>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
You can use flex-box to achieve this,
I have added this in parent,
display: flex ;
align-items: center;
justify-content: space-evenly ;
You also have to remove width: 50%; from the .child class and add the following CSS,
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin: 4px;
Now you can add further CSS as you want.
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
display:flex ;
align-items:center;
justify-content:space-evenly ;
}
.child{
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin:4px ;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
If I understand your question correctly this should help. First what you want to do is understand what Flex is in html, this first helped me to understand flex.
So you want to add display: flex; to your container/.parent to tell the script that the container is a flex element. After that you should add text-align: center; to center the text inside the .parent. Finnaly, add justify-content: space-evenly; so this way all of the items inside the .parent are spaced evenly from each other.
Also a lot of the things that you put in .child I removed becasue they where unnecessary to achieve what you are going for. I did add margin: 5px; just to make it look more visually appealing.
Your finished code should look like this
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
display: flex;
background-color: red;
width: 100%;
text-align: center;
justify-content: space-evenly;
}
.child{
margin: 5px;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label><br>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
Hope this will be close to your desired result, I added some CSS to match the posted HTML.
Each input is centered in a box half of the container with flex: 1, so there is no need to set width in the code.
You can add more child field here, and the layout will scale naturally.
Example:
.title {
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper {
margin: 0;
padding: 0;
background-color: yellow;
}
.parent {
background-color: red;
flex: 1;
display: flex;
justify-content: center;
}
.child {
color: #fff;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br />
<input type="text" id="Name" name="fname" />
</div>
<div class="child">
<label for="Surname">Surname:</label><br />
<input type="text" id="Surname" name="fsurname" />
</div>
</div>
</div>
</form>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
My question is the following: What do I do (either in the HTML, CSS, or both) to move the radio buttons down? I want it so that the first radio button is in-line with the question and the following radio buttons are beneath the first i.e. listed in a 1,2,3 order going down.
My HTML is:
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
And my CSS is:
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}
You can use additional div wrapper class container and flexbox properties align-items:flex-start, justify-content: center and A little white space like gap properties in this case.
.wrapper{
display: flex;
align-items:flex-start;
justify-content: center;
gap: 1rem;
}
.question {
border: 1px solid black;
display: inline-block;
width: 45%;
text-align: right;
}
.answer {
border: 1px solid black;
display: inline-block;
text-align: left;
width: 45%;
}
<div class="wrapper">
<div class="question">
<label>At what time of day did it happen?</label>
</div>
<div class="answer">
<input type="radio" id="morning"><label for="morning"> Morning</label><br>
<input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
<input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
</div>
I figured it out. I just need to add vertical-align: top; to .answer's CSS
I've had a bit of an issue with some flex containers. They're a label and an input in a flex container. Unfortunately, if I change the height of the container from auto, the contents cease aligning - the label's text remains at the start of the flexbox, but the input's text follows the middle. I've written a MWE to demonstrate.
label, input {
border-style: solid;
border-width: 2px;
border-color: red;
background-color: black;
}
.stretch {
display:flex;
height: 4em;
}
.baseline {
display: flex;
height: 4em;
align-content: baseline;
}
.flex-innards {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards * {
display: flex;
align-items: center;
}
.flex-innards-start {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards-start * {
display: flex;
align-items: flex-start;
}
.short {
height: auto;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":("></input>
</div>
<div class="baseline">
<label>How about baseline?</label>
<input value=">:("></input>
</div>
<div class="flex-innards">
<label>Flexing the children kinda works</label>
<input value=":o"></input>
</div>
<div class="flex-innards-start">
<label>But only if they're centered</label>
<input value=":("></input>
</div>
<div class="field short">
<label>Deceptive stretch</label>
<input value=":S"></input>
</div>
https://jsbin.com/nulobolulo/edit?html,css,output.
I've managed to make them vertically centered together in the third box there (using How to vertically align and stretch content using CSS flexbox), but I'd like to have them both have their text aligned to flex-start, as well as filling the complete height of their container.
If possible, I'd like to avoid adding extra elements to the HTML. Thank you.
I think the only way to address this problem with CSS uses the padding property.
input {
padding-bottom: 40px;
}
label,
input {
border-style: solid;
border-width: 2px;
border-color: red;
}
.stretch {
display: flex;
height: 4em;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":(">
</div>
I am trying to get the text input on the same line as the h1 tag inline then display it as a flex-direction of column. But it only seems to want to set all the inputs in a line and with the h1 on top which is not what I want.
Here is what I mean.
here is the desired output:
.contactuscontent{
border: 1px solid pink;
display: flex;
}
.contactusinput {
display: inline-flex;
flex-direction: column;
border: 1px solid purple;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><h1>Name</h1> <input type="text"> </div>
<div class="email"><h1>Email</h1> <input type="text"> </div>
<div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
</div>
</div>
You should look into semantics of HTML, <h1> is used for headlines.
If you want to add labels for input fields you should use <label for="...">. You can style the any tag in any way you want so default styling should not be a reason to use a tag at all.
.contactuscontent {
border: 1px solid pink;
display: flex;
justify-content: center;
}
.contactusinput {
width: 400px;
border: 1px solid purple;
}
.contactusinput>div {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.contactusinput label {
width: 200px;
}
.contactusinput input,
.contactusinput textarea {
width: 200px;
padding: 3px;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><label for="name">Name</label> <input type="text" id="name" name="name"> </div>
<div class="email"><label for="email">Email</label> <input type="text" id="email"> </div>
<div class="refer"><label for="howtofind">How did you find us</label> <textarea id="howtofind"> </textarea> </div>
</div>
</div>
That's because h1 is a block element, and since it's inside an un-styled div, it will push the input in a new line.
If you make the div that wraps the h1 and the input as flexbox, it will look similar to the image:
.contactusinput div {
display: flex;
}
You don't need flexbox on any of the parents for this to work.
To push inputs in the same line you can add min-width to the h1:
h1 {
min-width: 200px;
}
You will need to apply different styling to smaller screens, likely removing the min-width and showing the h1 in a column instead of row.
Here is a jsFiddle
By the way, heading elements h1-h6 aren't meant for this. You generally want to have only one h1 in the entire site. The better option to use here would be label.
To make the design you want, it is needed to set flexbox on the div which contains input and h1.
So in this case, there will be 3 divs to have the flexbox design and all of them are the direct childs of .contactusinput selector.
So on style, you can set the .contactusinput > div (direct div child of .contactusselector) style to flexbox as follows.
.contactuscontent {
border: 1px solid pink;
display: flex;
}
.contactusinput {
display: inline-flex;
flex-direction: column;
border: 1px solid purple;
}
.contactusinput > div {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><h1>Name</h1> <input type="text"> </div>
<div class="email"><h1>Email</h1> <input type="text"> </div>
<div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
</div>
</div>
I need to align 3 items inside Div.
Every item must be placed vertically in the center.
First item 2% margin-left.
Second item in the center and must be a textbox.
Third item 2% margin-right.
Item First and Third must fit the div(square).
I used alignment but it didn't work. Here there is a graphic example:
HTML
<div id="container">
<div class="box" id="left"></div>
<input type="text" name="search" placeholder="SEARCH HERE" id="searchbox">
<div class="box" id="right"></div>
</div><!-- end #container-->
CSS
#container {
display: flex;
justify-content: space-between;
align-items: center;
width: 95%;
height: 90px;
background-color: orangered;
}
.box {
height: 75px;
width: 75px;
background-color: lightgreen;
}
#left {
margin-left: 2%;
}
#right {
margin-right: 2%;
}
input {
width: 250px;
padding: 18px;
font-size: 2em;
}
DEMO: http://jsfiddle.net/xptx9wxn/2/
For more information about CSS Flexbox visit:
A Complete Guide to Flexbox
Using CSS flexible boxes - Web developer guide | MDN