Inside a long cell I have a image aligned to the left. Fine. Now I would like to insert a label right of the image that is aligned to the very right. When I try this the label appears always directly next to the image, hence isn't shifted to the very right, to the cell's end.
I tried variants of:
<img align="left" src="..." /><span align="right"><label>Mytext</label></span>
But the text is never shifted to the very right, it always stays directly next to the image.
Any ideas?
EDIT:
Fixed with:
<img align="left" src="..." /><span style="float:right"><label>Mytext</label></span>
Change
<span alignment="right">
to
<span style="float:right">
jsFiddle example
There is no "alignment" attribute so use just plain old CSS.
Related
I want to add an image (img src="~/img/logo2.jpg) next to below image in a different column.
<header class="header overlay"
id="core_view_Header_0"
style="display: block;">
<!-- visible bar -->
<div class="col-md-12">
<table style="width: 100%">
<table style="display: <inline-block>;">
<table style="float: left;">
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
</td>
To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):
The other option is to tell the web browser to push the graphic all the way to the left or right and make the text fill in NEXT to it, as the cat graphic to the right is doing here.
This is the code you need to align an image to the right:
**<img src="http://www.example.com/graphic.jpg" style="float: right;** margin-left: 5px; margin-bottom: 5px;"**>**
(The parts without ** are optional.)
What's all that gobbledygook mean? Let's break it down.
<img ... > is the placeholder for an image.
src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.
VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:
<p style="clear: both;">
Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above filled in around that cat picture.
If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."
Add another img tag within the same <td></td>.
Try adding some external CSS styles to your rather than inline-CSS (Looks better and clear). Also make sure to give style for your image size.
If you would like your imges to be vertical aligned, try: display:flex and flex-flow:column
See snippet below:
header {
display: block;
}
table {
width: 100%;
display: inline-block;
float: left;
}
td {
display: flex;
flex-flow: column;
}
<header class="header overlay" id="core_view_Header_0">
<!-- visible bar -->
<div class="col-md-12">
<table>
<tr>
<td>
<a class="logo" href="#" target="" tabindex="12">
<img src="~/img/logo1.png">
</a>
<a class="second-img" href="#" target="" tabindex="12">
<img src="~/img/logo2.png">
</a>
</td>
</tr>
</table>
</div>
</header>
So I am currently making a blog and I wanted an image on the top left corner of the webpage, and right next to it I wanted a h1 tag right next to it. I tried using the span tags but they aren't working, any reason why my code isn't working? Do I need to learn css so I can properly position the text to be right next to the image?
<span>
<img src="Blocks.jpg" width="100" height="100" alt="This image cannot load"><h1>TheCyberJournalist</h1>
</span>
Of course, to do that you have to use a very simple css.
Something like this is working:
<span style="display: flex;">
<img src="Blocks.jpg" width="100" height="100" alt="This image cannot load"><h1>TheCyberJournalist</h1>
</span>
h1 element has display: block property - you need to change the display property into inline
<span>
<img src="https://media.newswest9.com/assets/CCT/images/20f11c7a-0e95-4440-af3a-1926cfb5e15a/20f11c7a-0e95-4440-af3a-1926cfb5e15a_360x203.jpg" width="150" height="100" alt="This image cannot load"><h1 style="display: inline">TheCyberJournalist</h1>
</span>
I am trying to align two links under an image as text, the HTML I got works perfect in Chrome and Firefox, however not in IE where 90% of our internal users are.
here is the code..
<div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
<p style="text-align: right;">Click to Nominate Online!</p>
<p style="text-align: right;">Print your nomination form here.</p>
</div>
<h2>"A World of Thanks!" program</h2>
<p>The “World of Thanks!” program is a collection of...</p>
In Chrome the above HTML shows the text and content on the left, and the image will show up on the right, with the link text underneath the image to the right.
In IE, the links show up first on the left, then the text, the image shows on the right as it should.. but somehow in IE the links are not going under the image instead they are going left of it.
Any idea? what am I doing wrong?
wrong in IE.. https://oppy.com/it/ie_broken.png
correct in Chrome.. https://oppy.com/it/correct_chrome_only.png
I don't have IE to test, but try setting a fixed width for the div.
<div style="float: right; width: 431px;">
a tags are naturally inline-block trying setting your a to display: block; Same with image tags. target the image in your css and add display: block; to that as well
I dont have IE but try this:
JSFIDDLE
How can I add some horizontal "padding space" without editing my css file? I have the code below:
<img src="./img/fig.jpg" align="right" style="display:inline;margin:2px;"/>
<div style="text-align:justify;">
Bunch of text.
</div>
I've tried specifying style="padding-right: 5px" for the text div or enclosing the img with a div that includes padding, margins, etc. but to no avail - I can see that I can successfully add padding to above and below the text or image with this style specification, but never a space to separate the image and text..
If I get it correctly you have an image and a text to the left of it. You want to separate the text and the image with further space. What I suggest is to place an additional margin between them. Do like that:
<img src="./img/fig.jpg" align="right" style="display:inline;margin:2px 2px 2px 5px;"/>
add float:left to the image with the padding property.
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="...">