I'm trying to line up some text between two images on its left and right. Why isn't it moving up?
<img src="srchere" /><span style="padding-bottom:10px;">Some text right here!</span><img src="srchere" />
The two images are larger than the text, so it looks like the text isn't aligned and is positioned lower than the images. How do I raise the text up? The code I have above doesn't seem to move the text up.
Thanks.
If you want images to vertically align with text, you need to use:
vertical-align: middle
Note that your padding-bottom might throw this off a little.
Also, if you are not already doing it, you should use an external stylesheet instead of inline CSS.
If you want to adjust manually, this can do
<span style="vertical-align:100%">
increase/decrease the percentage until u satisfy
HTML:
<div>
<img src="srchere" />
<span>Some text right here!</span>
<img src="srchere" />
</div>
CSS:
div {
display:block;
}
img {
height:30px;
width:30px;
}
img, span {
vertical-align:top;
display:inline-block;
}
Try adding align="absmiddle" attribute to the images.
By "up" I assume you mean aligned to the top of the container box. This should do what you want:
<img style="float: left;" src="...">
<p style="float: left;">Filler text. Filler text. Filler text.</p>
<img style="float: right;" src="...">
Related
<body>
<div id="banner">
<img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
<img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>
. . . more stuff down here
In CSS I have float: left for img1. On img2 I have float: right; and clear left;
I've been playing with this for hours with no success. What I'd like to do using CSS is center vertically the text between these two images. I'd also like to place it up against the left image, maybe a few pixels off.
Additionally I want to be able to set the font-size and other attributes (bold, color, etc.) of each of the two lines of text.
Can someone please put me on the right track? Nearly everything I try puts the text under the banner div completely. What am I missing?
Thanks.
If you put the p tag after the images, it will float up between the images and you can position it accordingly. You don't need clear:left on the right image and keep in mind that you can only have one id attribute on an element, not two. The images have two ids in your code, so I removed one.
<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
</div>
#img1{
float:left;
}
#img2{
float:right;
}
You can see this working here: http://jsfiddle.net/duq6R/
First off, you will need to remove the floats on the images and paragraph.
Second, you need to make both images and paragraphs display:inline-block;. Now, you can use vertical-align: middle; to achieve your desired effect.
#banner {
overflow: hidden; /*this is a cheap clearfix*/
text-align: center;
}
#banner img, p {
display: inline-block;
vertical-align: middle;
}
See this JS Fiddle.
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
I am designing this for a phone gap application..i want to code this in html..
i have two questions..
Q1)how do i place a text on the image at different positions?
suc as text1,text2,text3,text4 in the image given here.
Q2) how to place it at the centre in the page.i had given
<img src="img/img1.png" style="margin-left:5px;" />
<img align="middle" />
but,this makes no difference.
guidance required.please help.
i have another doubt...after running the program....there is the extension part of the body after the footer...if you drag up....you can see thtat the body that is between the header and footer is extended. and it moves evento the right.
any mistake in the coding?
put them in a Div, then give this Div a background style ;)
the code should be like this:
<div id='container'>
<span> text 1 </span>
<span> text 2 </span>
<span> text 3 </span>
<span> text 4 </span>
</div>
in the css:
#container{background:url(path/to/img) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; height:...px; width:...px;}
#container span{width:50%; height:25%;display:block; overflow:hidden;float:left;}
you can add border to the spans, color etc...
You can do that by wrapping image with div and z-index. Your code should look like this:
<div style="position:fixed; top:10px; left:5px; z-index:250; width:ofimage; height:of image;">
<span style="display:block; width:30; height:20; margins if you need; float:left">text1</span>
<span style it accordingly and add float left>text2</span><br>
<spanstyle them as first two>text3</span>
<span>text4</span>
</div>
<img src="your image" style="if any">
Let's say I have an Image.
<img src="lala.png" />
This image has a width=400px;.
and I want to type "Lala" under this Image.
<img src="lala.png" />
<br>
<span>Lala</span>
Note that I'm gonna be fetching those images and those texts from a database, the width of the images is fixed at 400px, but of course the texts will vary in size, so I can't use margin-left:100px; to push the text to the middle because It will look wrong on other texts...
What is the best way to do it?
You can use a div instead of span.
HTML:
<div class="underImage">Blah</div>
Style:
.underImage {
width: 400px;
text-align: center;
}
you can do this by text-align:center;
<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>
Just wrap the image and text in an element and use the text-align CSS attribute on the wrapping element.
HTML
<p class="center-wrapper">
<img src="lala.png" />
<br>
<span>Lala</span>
</p>
CSS
.center-wrapper { text-align: center; }
There are several ways to achieve that, but the most flexible and most effective way is to use a one-cell table, with the caption text in a caption element:
<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>
There are many people who oppose such use of a table on quasi-religious grounds, but it’s still the flexible way that does not require you to set the width of the text explicitly (as opposite to letting it be determined by the width of the image) and works independently of CSS support.
I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.
I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:
On the right, I need to add another image, without disturbing the text on the left.
This is my HTML code (stripped down to the basics):
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<p>
Here is my text ...
</p>
<br />
<img src="Images/Icon-2.png" />
<span class="content-title">My Title 2</span>
<p>
Here is my text ...
</p>
<br />
And the CSS that emulates the table layout:
.content-title
{
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
color: #363636;
top: -28px;
position:relative;
left:+10px;
font-weight: bold;
}
#content-benefits p
{
margin-left:80px;
top:-30px;
position:relative;
width:325px;
}
My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.
If you want another image add it to the HTML before the rest of the "section" and then float it right with:
img {
float: right;
}
On another note, why aren't you using heading tags to display your headings?
You could use the css display:table to make it apear using a table take a look at the docs for this found here
Place the image after the titles span end tag
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<img src="Images/icon-1.png" />
<p>
Here is my text ...
</p>
<br />
if i properly understand your layout i would do this
<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
<img style="float:right; width:80px"/>
<div style="float:left; width:325px">
<span/>
<p>
...
</p>
</div>
</div>
you wont need the other positioning you used
if you cannot change the markup,
than put width to the span and p and float:left, and put float:right and width to img
putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.