I was trying to create a registration form and I encountered a problem.jsfiddlehere
Output is as shown in image below
As shown in the image I want the address to be at the top of the line as indicated without using style position relative or absolute. Is it possible to fix that with margin or padding. And the other thing is why the address text is appearing in the bottom, doesnt it be at the top by default? Is it because of textarea?
Thanks in advance
To align verticaly 2 inline-block elements, you can use vertical-align.
In your case:
.container span {
padding-left: 40px;
display: inline-block;
width: 30%;
/* Add vertical alignment */
vertical-align: top;
}
Here is a fiddle.
Add this to your CSS...
#address span{
vertical-align:top;
}
Write the html like this
<span> Address <textarea cols="5" rows="10"></textarea></span>
Add this to your css
span textarea {vertical-align:top;}
This code should keep the label at the top, you will then need to align your texarea to the other text fields
Related
I'm making an html email and I have some text and an image in a flexbox. I want to right align the image irrespective of the amount of text on the left. I used "justify-content: space-between" initially which would normally do the trick but that's not working with G-Mail. Any alternatives?
Hope you are using the table format for the e-mail part. And FYI, Gmail does not support flexbox.
To make the image align to the right, apply text-align: right; in the parent element of the img tag.
I suppose you are trying to align the text and the image on the same line but image will align on the left and the image on the right...
Try this:
h3 /* (or whatever element you are using for your text) */
{
text-align:left;
display:inline;
}
img{
display:inline; float right;
}
I'm trying to right-align a Font-Awesome icon within a table heading, while the heading text is left-aligned:
I created the above screenshot using a hard-coded margin-left value on the <i> element, but this doesn't account for changing table widths.
Is it possible to right-align only part of a table's heading using CSS? Or do I need to set the margin-left dynamically based on the current table width?
Here's a JS Fiddle showing CSS options I've tried, including .text-right and .right on the icon (which has no effect)
If it's an icon, why not just use a float?
.my-icon {
display: block;
width: 10px;
height: 10px;
float: right;
}
Don't forget to set overflow: hidden; on the container, of course.
If you set the th to position: relative, you can use absolute positioning to get the desired effect. Try something like:
http://jsfiddle.net/tuL2gmns/2/
I want to place a text and button in a table cell. The button needs to be aligned to the right. If I apply float:right style to the button the vertical alignment is going bad. Any help?
Here's jsfiddle with no float:right, vertical alignment is fine here:
http://jsfiddle.net/5GRHL/2/
Here's jsfiddle with float:right applied:
http://jsfiddle.net/5GRHL/3/
I believe the easiest solution is to set a fixed height to your button, and applying that same height as a line-height to the text. Something like this:
td
{
height:50px;
width:80px;
vertical-align:middle;
line-height: 22px;
}
td button
{
float:right;
height: 22px;
}
I updated the fiddle: http://jsfiddle.net/5GRHL/26/
I think the easiest solution (but maybe not the cleanest) is to realign the button.
Try something like:
button {
margin-top: -4px;
float: right
}
You could just use the float:right and correct the alignment with positioning: http://jsfiddle.net/5GRHL/23/
Is it possible to align everything to center in this example by using CSS? If not then what should I do?
As you can see the images are not the same height so it makes things even more complicated. What I want is align all images and text so they look like a line.
Here is fiddle: http://jsfiddle.net/cRGeD/
Simple answer use span instead of li
http://jsfiddle.net/cRGeD/22/
This could help you, I have added DIV for text and floated it to left,
then adjusted line-height 250% of li, check fiddle
http://jsfiddle.net/chanduzalte/cRGeD/8/
Edit: here I've applied the principle below to the first two items in your jsFiddle: http://jsfiddle.net/cRGeD/23/.
HTML
<span class="icon question-icon">1234</span>
CSS
.icon{
padding-left: 20px;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
}
.question-icon{
background-image: url("../path/for/images.jpg");
}
This way you can use a different class for a different icon, and only need to add the image path to the new class.
How would I go about vertically centering the name "Tony Robbins" for this drop down menu? I've tried adding vertical-align:middle to both the span containing the text and to the li#drop-avatar which contains the text. Can someone let me know what I'm doing wrong?
P.S. is there also a way to get text-align: center also working so "Tony Robbins" is also centered horizontally?
http://jsfiddle.net/vJaaR/
add:
img
{
vertical-align: middle;
}
Because your text is inline with the image, you need to tell the image how to align with the text.
span is an inline element, so it will only take up the amount of space that it needs. Consider making this span a block element using display: block and it will take up the full width. Then you can apply text-align: center to it.
You may have to float the image to the left in this case, though.
Update: I added the styles to the fiddle:
http://jsfiddle.net/Dismissile/vJaaR/1/
Does this do what you want?
These are the styles I added:
a.small-width > span {
display: block;
text-align: center;
}
a.small-width > img {
float: left;
}
You might want to create new classes because I have no idea what else you use small-width for.