So I have an image "blah.jpg" and a name "Name" in HTML.
<img src="blah.jpg"> Name
I want to make it so that the Name is center aligned with the center of the blah.jpg image instead of the text "Name" having a baseline at the bottom of the image.
What is the best way to accomplish this with no tables using CSS3 if possible?
In the page:
<img src="blah.jpg" class="centered"> Name
In css file:
img.centered {vertical-align:middle;}
No need for display: inline-block (which is not supported in some old browsers)
You can use vertical-align: middle on your img element: http://jsfiddle.net/Z35pw/ .
If you want a one-liner, without defining extra objects or attributes, simply add style="vertical-align:middle" inside the <img .../> tag.
Related
What css code should I use to align text according to instead of ?
I have tried using position: absolute on yet it doesn't work.
Example(Notice the spacing between those annotation is the same but not the their bases):
ruby{font-size: 20px;}
<ruby>我<rt>1</rt>係<rt>2222222</rt>香<rt>33</rt>港<rt>444</rt>人<rt>5555</rt></ruby>
I expect aligning the text with its bases instead of those text annotation. How can I achieve this Thank you.
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
I've got the following "key" which is a div containing pictures of the planets and their names for an educational animation. Is there a quick way/shortcut (without wrapping the text in separate spans or something then assigning top/bottom/left/right properties to specific ids) to make the text appear in-line with the icons?
<p id='key'>
<img class='img-key' src='media/mercury.ico'> Mercury
<br/>
<img class='img-key' src='media/venus.ico'> Venus
<br/>
<img class='img-key' src='media/planet-earth.ico'> Earth
<br/>
Not sure I understand but here are two possible solutions. If you want everything on one line, remove the <br /> tags.
jsFiddle example
If you want the text centered vertically with each image, set the vertical-align property to middle on the images:
img {
vertical-align:middle;
}
jsFiddle example
I've been using HTML/CSS for ~2 weeks now.
I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.
If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.
Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).
http://jsfiddle.net/nhv54/
When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.
Html
<p>
Vertically centered text
<img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>
Check this out
http://jsfiddle.net/nhv54/3/
Things to notice in CSS
.pull-left * {
float: left;
}
And every div you want content to be on one line should have class "pull-left"
<div class = "ProjectsModules pull-left" id = "example1">
<img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy .jpg"/>
<div id = "ProjectsModulesText">
<h1> Jim </h1>
<p>
stuff
</p>
</div>
</div>
You can also set vertical-align: middle; on whatever tag your text is inside, presumably a p.
You could use inline-blocks
I updated your JSFIDDLE
http://jsfiddle.net/nhv54/16/
I have text in a <div> that I want centered vertically. Any easy way to do this (non-absolute positioning method).
this is another method:
http://jsfiddle.net/SebastianPataneMasuelli/V2D3L/1/
the trick is to make the height of the div the same value as line-height.
<div>some text</div>
div {
line-height: 100px;
height: 100px;
}
this gives you a line of vertically centered text.
there is a way: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.
sorry, that uses absolute positioning.
(but it works)
Yes it is possible - a very thorough investigation can be found here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
No, unfortunately there is not good way of doing this using CSS. I would suggest using a javascript framework like JQuery or something like that a go to achieve this. Is it just text your are trying to vertically center?
Also, I know many people are reluctant to use tables however html tables will allow you to vertically center your text, so that may be a quick work around if you are not willing to use javascript to achieve this.
So I guess the its either use some javascript and avoid using html tables or just use tables to do your vertical centering for you.
Just for you reference you use the valign attribute on a td element of a table to vertically align its contents.
You could do something like this:
<div id="center-text">
<div id="center-text-inner">
hello there
</div>
</div>
$(document).ready(function() {
$('#center-text-inner').css({
'position' : 'relative',
'top' : ($('#center-text').height() - $(this).height()) / 2
});
});
Just add the following css to div
display:table-cell;
vertical-align:middle;
you can also see example http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/