The html:
<td>
<img>
text here
</td>
The css:
td img{
display: block;
float: left;
}
I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertical alignment of the text.
Any ideas?
If you know the height of the image itself you can use the line-height property.
<td style="line-height: 50px;">
<img>Text text text
</td>
This should force the text to be displayed in the center of the line-height.
Try setting vertical-align:middle; in the CSS for the img. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).
Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*
Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.
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 :).
http://pastebin.com/index/9M2rA8cx that has all my code.
You will notice that the two div's are centered in large.css. However, the text is being re-centered after each '.' is applied. If I put the span id="wait" outside the centered div, it will show up in the upper left corner. I don't need exact centering, but I can't use a absolute position for centering because the text changes.
Is there any way to append the "..." to the already centered text without it re-centering?
thanks!
Can't you just apply a fixed width style to the wait span, such as:
span.wait{
display: inline-block;
width: 20px;
}
I'm having this problem where I have 2 divs on a content page (within a content wrapper) and I can't have the image aligned with the text next to it.
.text-block{position:relative; float:right; width:70%; height:auto}
then I have the image:
.img-block{position:relative; float:left; vertical-align:middle;}
Not sure if is possible to have an image aligned with text when they're in different divs though.
Here I've made text vertical align as middle next to a image div. Only CSS, no JavaScript used.
Text Vertical Align Middle - Sample
Hope this is the result you expect...
If you are looking for some thing more, pls make comment...
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
I need to display a expand icon in td, when I am doing that, text & image are not getting aligned. I have used spacer.gif(1x1) through which I am calling expand icon. If I specify the width & height directly in the img tag text is not getting aligned as well.
Also I have used spacer.gif the reason being I can easily call which ever icon I want or for td's where there is no expand icon I can simply specify width so that it aligns nicely with all other td's.
<td><img src="../images/spacer.gif" class="texpand_icon"/>Actuals</td>
.texpand_icon{background:url('../images/plus.gif') no-repeat left center; padding-left: 16px;}
Can someone fix this problem?
Have you tried the valign attribute?
<td valign="middle"><img /></td>
That should align the image itself. To get the text to align with the image you can use CSS' property vertical-align on the image:
.texpand_icon{
vertical-align: middle;
...
}