Hello, I’ve made it to my first HTML project on the Survey form project and I’m looking for some assistance with my css text-align on this image
HTML Code for this section so far:
<fieldset id="info">
<label for="name">Name: <input id="info" name="name" type="text" class="inline" required/></label>
<label for="age">Input your age (years): <input id="info" type="number" name="age" min="13" max="120" class="inline"/></label>
<label>Email: <input id="info" name="email" type="email" class="inline" required/></label>
</fieldset>
CSS Chunk so far:
fieldset[id="info"] {
text-align: vertical;
text-align: center;
}
I’m very much assuming it’s something very simple im overlooking. If you require the whole code let me know just tried to keep it shorter.
Sorry it won’t let me edit my post with the updated picture but I did indeed post the wrong one.
Also I didn’t mention what I’d fully like to do and I’m sorry for that as well.
I’d like to center align these 3 lines of text/inputs as well as have a vertical alignment on the left hand side.
I’m still not exactly sure what you’re trying to accomplish but I can give you these pointers:
The text-align property is for horizontal alignment, so setting inline elements ‘left’ or ‘right’ etc…
I would like to align these 3 lines/inputs, name, age and email vertical along this red line as well as keep them central in the page. Hope that explains it better. Sorry for the confusion
One approach you could take is to put those 3 labels/inputs inside of a container (like a div element), center the div, and then use text-align: left on the 3 labels/inputs.
1 Like
a2937
May 13, 2024, 8:02pm
7
I would look into column layouts actually. You can specify columns with a column-count property in CSS.
2 Likes
I seem to be having issues making this one work. Could you maybe give an example?
I will take a look at this thank you.
Total noob im not even sure if what i want is possible.
A very basic example of that approach would like this
<style>
div {
margin: 0 auto;
width: 100px;
}
p {
text-align: left;
}
</style>
<div>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
So I guess theres many ways to do many things lol. I accidently figured it out while messing around with yours.
<fieldset id="info">
<p id="name"><label for="name">Name: <input id="name" name="name" type="text" required/></label></p>
<p id="age"><label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" class="inline"/></label></p>
<p id="email"><label>Email: <input id="email" name="email" type="email" required/></label></p>
</fieldset>
fieldset[id="info"] {
margin-left: 50%;
margin-right: 50%;
}
p[id="name"] {
text-align: center;
}
p[id="age"] {
text-align: center;
}
p[id="email"] {
text-align: center;
}
Thank you so much @SpookyBlump & @a2937 for also guiding
1 Like
Maybe you could help me because I decided to incorporate a 3 column setup for my project and for whatever reason I can click the left side radios and right side radios but not the middle lol… so weird.
<fieldset id="improvements">
<p id="improveP"><label id="improveL" for="improvements">If you could improve anything, what would it be?</label></p>
<div class="row">
<div id="Improve-C1" class="column">
<p id="Improve-C1P">Font-end Projects <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C1P">Back-end Projects <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C1P">Data Visualization <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C1P">Challenges <input id="improve-other" type="radio" name="improve-radio"></p>
</div>
<div id="Improve-C2" class="column">
<p id="Improve-C2P">Open Source Community <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C2P">Gitter Help Rooms <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C2P">Videos <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C2P">City Meetups <input id="improve-other" type="radio" name="improve-radio"></p>
</div>
<div id="Improve-C3" class="column">
<p id="Improve-C3P">Wiki <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C3P">Forum <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C3P">Additional Courses <input id="improve-other" type="radio" name="improve-radio"></p>
<p id="Improve-C3P">Other: <input id="improve-other" type="text" name="improve-other"></p>
</div>
</div>
</fieldset>
.column {
float: left;
width: 33.33%;
}
div[id="Improve-C1"] {
text-align: center;
}
div[id="Improve-C2"] {
text-align: center;
}
div[id="Improve-C3"] {
text-align: center;
}
p[id="improveP"] {
text-align: center;
}
label[id="improveL"] {
padding-bottom: 50%;
}
Edit: I know it’s not necessary because this will be a “click all that apply” situation. But for the purposes of learning.
Edit 2: Cancel that, even without name=“” to make them all the same radio so it deselects, it still won’t allow clicking the center ones.
The #Improvel has a padding that seems to block the user from clicking the radios. You will have to remove that.
I noticed that you are using the same id multiple times which is incorrect. The id attribute is supposed to be unique for each element. You will have to correct that too.
Okay, so absolutely was correct, thank you. However I had to totally remove my “centering”
So now we have this
<fieldset id="improvements">
<p id="improveP"><label id="improveL" for="improvements">If you could improve anything, what would it be? (Select all that Apply)</label></p>
<div id="improvementDiv" class="row">
<div id="Improve-C1" class="column">
<p id="Improve-C11"><label for="improve-other">Front-end Projects <input id="improve-other1" type="checkbox" name="front"></label></p>
<p id="Improve-C12"><label for="improve-other">Back-end Projects <input id="improve-other2" type="checkbox" name="back"></label></p>
<p id="Improve-C13"><label for="improve-other">Data Visualization <input id="improve-other3" type="checkbox" name="data"></label></p>
<p id="Improve-C14"><label for="improve-other">Challenges <input id="improve-other4" type="checkbox" name="challenges"></label></p>
</div>
<div id="Improve-C2" class="column">
<p id="Improve-C21"><label for="improve-other">Open Source Community <input id="improve-other5" type="checkbox" name="opensource"></label></p>
<p id="Improve-C22"><label for="improve-other">Gitter Help Rooms <input id="improve-other6" type="checkbox" name="gitter"></label></p>
<p id="Improve-C23"><label for="improve-other">Videos <input id="improve-other7" type="checkbox" name="videos"></label></p>
<p id="Improve-C24"><label for="improve-other">City Meetups <input id="improve-other8" type="checkbox" name="citymeet"></label></p>
</div>
<div id="Improve-C3" class="column">
<p id="Improve-C31"><label for="improve-other">Wiki <input id="improve-other9" type="checkbox" name="wiki"></label></p>
<p id="Improve-C32"><label for="improve-other">Forum <input id="improve-other10" type="checkbox" name="forum"></label></p>
<p id="Improve-C33"><label for="improve-other">Additional Courses <input id="improve-other11" type="checkbox" name="extra"></label></p>
<p id="Improve-C34"><label for="improve-other">Other: <input id="improve-other12" type="text" name="improve-other"></label></p>
</div>
</fieldset>
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
p[id="improveP"] {
text-align: center;
font-size: 20px;
}
div[id="improvementDiv"] {
text-align: center;
}
If we remove the bottom div[id=“improvementDiv”] {} it goes back to left alignment and functions fine. If we keep it, it allows top check to be selected of the center column. Thank you for helping with this by the way lol. i’m definetly learning
Sorry, I found the problem. It was further back in my styles sheet.
Had more padding that was interferring.
1 Like
system
November 13, 2024, 6:44am
16
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
