I want to align an image in the right side of a span element.
I had this working fine inside a td element but it is not working now that I've moved it into a a span. Would appreciate any suggestions.
<div style="width:400px;">
<span style="display:inline-block;width:50%;" onclick="location.href='http://www.google.com'">Go to Google</span><span style="display:inline-block;width:50%;float:right;weight:bold;" onclick="location.href='http://www.yahoo.com';><img src="test.gif" width=40 height=40 border=0>Go to Yahoo</span>
</div>
http://jsfiddle.net/sVdE3/
How about this?
<div>
<span onclick="location.href='http://www.google.com';">Go to Google
<img src="https://www.google.com/images/srpr/logo11w.png" width="40" height="40" border="0" />
</span>
<span onclick="location.href='http://www.yahoo.com';">Go to Yahoo
<img src="https://www.google.com/images/srpr/logo11w.png" width="40" height="40" border="0" />
</span>
</div>
And the following for the CSS:
div {
width: 400px;
}
span {
display: inline-block;
width: 50%;
float: left;
}
img {
float: right;
}
http://jsfiddle.net/grim/sVdE3/2/
Note that you have some errors in your markup such as quotes (") that you didn't close.
Related
I've seen working examples of middle-aligning a single line of text next to an image, like so:
<div>
<img style="vertical-align:middle" src="testImage.png" />
<span style="">This works</span>
</div>
But I need to align two spans, one above the other, because they will eventually need to have different styles, and the following results in the second span being rendered beneath the image:
<div>
<img style="vertical-align:middle;" src="testImage.png" />
<span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
NOTE: I did experiment with using float:left; for the image, which does work to a degree, but fails when the text is long enough that it requires the div to expand (it does not factor in the width of the image and produces an undesired text-wrap)
EDIT: This is an example of the solution that worked for me, based on the answer given by aje, containing a small tweak of adding vertical-align: middle; to the div tag. I've included this as an edit, rather than add my own answer, because I'd like to credit aje with the answer that helped me:
<div style="border: solid 2px green;">
<img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="vertical-align: middle; display: inline-block">
<span>This now works properly.</span><br />
<span>Thanks for the help!</span>
</div>
</div>
Wrap span under a div below is a snippet
<div>
<img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="display:inline-block"><span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
</div>
div {
display:table;
}
div img {
float:left;
margin-right: 10px;
width: 200px;
}
div p {
display:table-cell;
vertical-align:middle;
}
div span {
display: block;
}
div:after { /* it's always good practice to clear floats */
content: '';
display: block;
clear: both;
}
<div>
<img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" />
<p>
<span>This doesn't work</span>
<span>I'm annoyed</span>
</p>
</div>
I have the following code:
img {
display: block;
margin: 0 auto;
}
<h2>Center an Image</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
<img src="paris.jpg" alt="Paris" style="width:40%">
<img src="paris.jpg" alt="Paris" style="width:40%">
But I have this problem -
If i do as you see in the code: I am loosing the center effect and the all images are going left.
The only possibility I know - is to do display the images as "block" instead of "inline-block" - but that is make them one above the other and I want them to be close to each one.
You can center images by wrapping them in another div and giving this wrapper text-align:center (if you want them as inline-block elements):
img {display:inline-block;}
.wrapper {text-align:center;}
<div class="wrapper">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
<img src="http://placehold.it/350x150" alt="Paris" style="width:40%">
</div>
You should use a DIV container around the image tags and give it a
width and
margin:0 auto instead of the images. put those on
display: inline-block.
From a JSFIDDLE
.wrapper {
border: 1px solid grey;
width: 80%;
margin: 0 auto;
text-align: center;
}
img {
display: inline-block;
}
<div class=wrapper>
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" alt="Paris" style="width:20%">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="Paris" style="width:20%">
<img src="http://1.bp.blogspot.com/-FlpE6jqIzQg/UmAq6fFgejI/AAAAAAAADko/ulj3pT0dIlg/s1600/best-nature-desktop-hd-wallpaper.jpg" alt="Paris" style="width:20%">
</div>
I have three images, the firsts are the brazilian flag and the english flag (language settings).. and the third is the logo of my site...
code:
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
I want the first and the second above the third..
So, in my css i made:
.language {
margin: 0 5px 0 10px;
}
.logo {
width: 40%;
margin-top: 60px;
}
There is something wrong?? it's not working.
At the moment you have all three images in the same "row". You didn't separate them in two rows in any way.
I would suggest putting language icons in their own div tag like this:
<div>
<a class="language" href=""><img src="assets/images/languag/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
</div>
<img class="logo" src="assets/images/logo.png">
More information missing from your question, but I guess that's it
<style type="text/css">
.classe1 {
background-image: url('../../Content/images/carousel2.jpg');
background-repeat: no-repeat;
height:100px;
}
</style>
<div class="classe1">
<img src="../../Content/images/Icon1.png" alt="" width="40px" />
<img src="../../Content/images/Icon2.png" alt="" width="40px" />
</div>
If you can't influence the HTML, you can make <br> with CSS:
a + a:after {
content: "\A";
white-space: pre;
}
Since ::before and ::after don't work on self closing tags like <img>, you'll have to add it to the second <a>
Voila demo
Just make it like this
HTML
<div class="wrapit">
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
</div>
CSS
.wrapit {
width: 100px;
float: left;
}
.wrapit img { width: 100%; float: left; }
.wrapit a { float: left; width: 50%; display: block; }
I have three images numbered 1, 2 and 3.
I want to display them using CSS like demonstrated here.
I currently have them inside a <span> and have tried various combinations of position and float. I can get them to be display consecutively but I cannot get image 2 to be position above image 3. Here's my code:
<img src="1.gif" style="padding-right: 4px;"/>
<span>
<img src="2.gif" style="float: top;">
<img src="3.gif" style="float: bottom;">
</span>
There's no such things as float top or bottom.
To achieve a visual like your example try this:
<div style="float;left">
<img src="1.gif" style="padding-right: 4px;"/>
</div>
<div style="float:right">
<img src="2.gif" style="display:block;">
<img src="3.gif" style="display:block;">
</div>
You want to set the images to display: block (so they'll end up on top of one another), and float the first image to the left.
CSS:
.stack img {
display: block;
}
.leftside {
padding-right: 4px;
float: left;
}
HTML:
<img src="http://placekitten.com/100/100" class="leftside"/>
<div class="stack">
<img src="http://placekitten.com/50/50">
<img src="http://placekitten.com/g/50/50">
</div>
See this in action here: http://codepen.io/paulroub/pen/zFEjH
Change your css to this:
img {
float:left;
margin-right: 4px;
}
span img {
float: left;
margin: 0;
}
span img:last-child {
margin-top: 50px;
margin-left: -50px;
}
Fiddle: http://jsfiddle.net/FLTU7/
I'm running into an issue where center aligning a set of images works in the first div I use it in but then doesn't in subsequent calls.
Here's my CSS:
.writingsText {
width: 750px;
margin-left: 50px;
text-align: justify;
}
.floatImageLeft {
float: left;
padding: 10px;
}
.centerImage {
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
And my html:
<div class="writingsText">
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="goldengrid.png" width="270" height="170" />
<img src="spacer.png" width="10px"/>
<img src="goldenspiral.png" width="270" height="170" />
</div>
<br />
<div class="floatImageLeft"><img src="kochiteration.png" /></div>
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="mandelbrotgif.gif" width="200" height="200" />
<img src="spacer.png" width="10px"/>
<img src="kochgif.gif" width="200" height="100" />
</div>
<br />
</div>
So the first set of centered images look great, my text wraps beautifully around my left floating image, and then on the second call to the centerImage class (and third, etc) the images do a partial indent (to what looks like the left edge of the first set of centered images) but are not centered. I've also tried using
<div style="clear:both"></div>
above the additional centered divs (this fixed alignment issues for me in a separate project) but it doesn't do anything. What am I missing?
Have you tried adding “clear: both” to your .centerImage CSS declaration?