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;
}
Related
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
I'm beginning to mock-up a WordPress theme based on Twitter's Bootstrap framework.
Could someone validate the code I have so far is kosher?
More specifically, the header...
I have my name and sub-head beside an avatar image.
I want the text to appear vertically in the middle of the image. This works successfully when the page is wide enough (screengrab: imgur.com/YCpSm). But, when I reduce the browser width and responsive design kicks in, the text moves up (screengrab: imgur.com/K4Vyj).
How do I ensure the text stays in the vertical center of the image?
Thanks.
--
Code: http://jsfiddle.net/robertandrews/jP4nT/ (contains standard bootstrap.css, standard bootstrap-responsive.css and custom CSS in one)
Page: http://jsfiddle.net/robertandrews/jP4nT/embedded/result/
You could go with floating elements instead of absolute positioning:
http://jsfiddle.net/jP4nT/1/
I also wouldn't place the <h1> tag within the <p>, but that's probably fine though.
This might be simpler: http://jsfiddle.net/6FMDR/
No extra html tags needed
Less css
CSS:
.myheader {
padding:15px 0 20px;
display:block;
}
.myheader img {
float: left;
padding:0 15px 10px 0;
}
.myheader h1 {
margin-top: 10px;
}
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.
I have used a wrapper to center div tags and it works for everything except the css in the link
Please check out:
http://jsfiddle.net/T5rBU/3/
As you can see the pink box with text is in the center but the black box isn't.
I have put
float: left;
but that is only because if I don't the black box doesn't show!?
try this:
.center div {
display:inline-block;
text-align:center;
}
it seams to work:
http://jsfiddle.net/u3ggV/
add a with to .center
.center {width:400px;}
or another width you cant center div with text-align
I don't quite follow what you mean but I think it could be down to not having a wrapping element to hold both divs - http://jsfiddle.net/djsbaker/T5rBU/4/
Did you want the black box beside or above/below the navigation?