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
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:
Vertically align text next to an image?
(26 answers)
Closed 1 year ago.
I think I miss something, but I have following structure
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
background-color: #999;
display: inline-block;
margin: auto 0;
vertical-align: center;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
In my opinion left part should be vertical aligned by center, but CSS have other opinion ) I've tried block/inline-block/inline variants with margin: auto 0/vertical-align variants with no success. What I'm doing wrong?
P.S. Without using flex and tables please. This is management constraints (
Use display: flex property and it make easy to align the content.
Along with it use align-items: center; to vertically center align
.improvement_request_current {
display: block;
background: #777;
display:flex;
align-items:center;
}
.improvement_request_current_title {
background-color: #999;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
Also one other method can be providing fixed height to parent and child(here given 100px) and than vertical-align: middle;.
But I don't recommend this method which you can see by removing comments from the background property and see that it is spanning out of parent element
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
/*background-color: #999;*/
color: blue;
display: inline-block;
vertical-align: middle;
}
.improvement_request_current_value {
display: inline-block;
vertical-align: middle
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
Temani Afif has given a short and simple solution, using vertical-align: middle to text-area will solve your problem
.improvement_request_current {
display: block;
background: #777;
}
.improvement_request_current_title {
background-color: #999;
color: blue;
}
.improvement_request_current_value {
display: inline-block;
vertical-align: middle
}
<div class="improvement_request_current">
<span class="improvement_request_current_title">Just some text</span>
<textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>
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
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>
This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I'm trying to place some <h1></h1> text, and an email form from Angular Material, into the center of a <div></div> section that has a colored background. The items are coming out stacked on top of each other, as if they were layers. The email form needs to be underneath the <h1></h1> tags. The only way I could get this to align properly was with position:flex, which I suspect is the underlying cause.
Here's my html and css:
<div class="top-section">
<h1 class="top-h1">
mytitle
</h1>
<md-input-container class="email-form" color="accent">
<input mdInput placeholder="Email us" value="Your email address">
</md-input-container>
</div>
.top-section {
height: 350px;
background-color: #04041b;
align-items: center;
display: flex;
justify-content: center;
}
.top-h1 {
color: #E8E8E8;
font-size: 60px;
position: absolute;
}
.email-form {
color: white;
font-size: 30px;
}
Any thoughts?
You're using position: absolute on the h1 which removes it from the flow of the page, and positions it relative to it's closest positioned parent. So other elements won't flow around it. Remove that. Then your items will display side-by-side since the default flex-direction for a flex parent is row. To display the items vertically, use flex-direction: column and the items will stack on top of one another in a column instead of side-by-side in a row.
.top-section {
height: 350px;
background-color: #04041b;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.top-h1 {
color: #E8E8E8;
font-size: 60px;
}
.email-form {
color: white;
font-size: 30px;
}
<div class="top-section">
<h1 class="top-h1">
mytitle
</h1>
<md-input-container class="email-form" color="accent">
<input mdInput placeholder="Email us" value="Your email address">
</md-input-container>
</div>
I would imagine this is due to the fact that you have .top-h1 with the position set to absolute.
Create something like the following and it should sort out your issue:
<div class="container">
<h1>Example</h1>
<div class="form">
<!-- ignore this div, this is an example of where your form will be. -->
</div>
</div>
.container {
height: 350px;
background-color: #E0E0E0;
width: 100%;
margin: auto;
text-align: center;
}
.form {
width: 100%;
margin: auto;
}
This should do what you want. If I have misunderstood the question please reply and I can adjust my response but this is what I get from you wanting the elements not to stack and for the form to be located under the h1 but remain centred.
For future reference, if you ever need to align a div, give it a width and then use margin: auto;
Best of luck.