When putting a <img> in text, it seems to want the bottom of the image to be at the text baseline, or a little above, example:
How can I have it so the image's center is at the text's center? I know it can be done with CSS, however I forgot how.
Using vertical-align: middle. E.g. http://jsfiddle.net/8QzFV/
Can you add padding to the top of the image?
#myImage
{
padding-top:6px;
}
just wrapp a div around it and use css style vertical-align:middle
Related
I'm trying to make the box divs be clickable, but the code I'm using is
display:flex;
align-items: center;
justify-content: center;
to center the text horizontally because when I use display:block, the text won't center horizontally if it's long.
I have a demo here http://jsfiddle.net/UHECE/32/
When you try to click the right div, you have to point the mouse over the text. I want the whole right div to be clickable (link like the text) regardless of the length of the text. As for the left div, you can hover anywhere on the div and it will be clickable because the text is long. I think it depends on the width of text, because when I tried to use Firebug and hover over the text on the right div, the height is 100%, but the width depends on the length of text. Does anyone know how to make the divs a clickable link?
As much as possible I'd like to stick with a CSS code please :)
The link tag in the right box is not filling the entire width. That's why you need to click the text (or above or below the text).
By adding display:block; and width:100%; to the link element, it's now filling the entire right box.
Updated fiddle:
http://jsfiddle.net/UHECE/33/
you should add this to your css file:
#rightq{
margin-top:50%;
margin-right:20%;
height:100%;
width:100%;
}
you wanted to select an ID with a . but thats not possible :).
Alright, so this is some of the css and html:
css:
div {
height:24px;
line-height:24px;
}
html:
<div><img src="image.png"/>Text</div>
Now what that should (I think) produce is a div that is 24 pixels high, and the text should be vertically center aligned in the div, after the image. P.S. the image is 24x24px. However, it throws off the line-height to be about 12px too much (reducing the line-height to 12px does not solve it). Changing the image to be 12x12px though works and puts the text in the right spot. if the image is completely removed, the text is in the right spot. I guess my question is why is that doing what it is, and if/how I can fix it.
Thanks, sharf.
Give vertical-align:middle to img
div > img
{
float:left;
vertical-align:middle;
}
Fiddle
Try adding vertical-align to the img and experimenting with that to get it they way you want.
The simplest (but not always the best) solution is
img { vertical-align: bottom; }
The image does not throw off line height; rather, it causes the height of the line box to become larger than line-height. The reason to this is that by default, an image is treated as if it were a letter, of the size specified by the image dimensions, sitting on text baseline. Thus, the image requires a height that is the height of the image itself plus the distance between text baseline and the bottom of the font.
In CSS terms, “sitting on text baseline” is caused by the default setting of vertical-align: baseline. You can override this in various ways, with different effects on the vertical placement, but beware that browsers have many bugs in the implementation of vertical-align, and the value of bottom is so simple that they probably get it right.
These CSS properties center the image of any size within a container of any size:
display:table-cell;
text-align:center;
vertical-align:middle;
This is a perfect fluid image centering, however, table-cell property gives me unwanted white space on the bottom. How to avoid it? See this:
http://jsfiddle.net/8DeLQ/1/
If the container contains no text content, you could possibly add font-size: 0; to the container's style. I think the unwanted whitespace is related to text content.
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.
I have an image and a div I want to place below it. (Here's the fiddle. http://jsfiddle.net/d3Mne/1/)
The problem is that there is a margin between the two. This bottom margin is only present with images. Is there any way to remove it?
Set display: block; on the image :)