I am trying to center some 3 lines text vertically on this example that i am playing with
http://thejit.org/static/v20/Jit/Examples/Treemap/example1.html#
But i noticed I cannot use line-height or height in this situation. Is there any other way of vertically centering without using height or line height?
//this code below doesnt work right
.node {line-height:8em;}
.node p {display:inline;display:inline-table;display:inline-block;
vertical-align:middle;}
You could try display:table and vertical-align:middle
So, it would be something like
.node{
display:table;
}
.node p{
display:table-cell;
vertical-align:middle;
}
Not sure it would work given the current layout of the example.
Related
I have the following fiddle, not able to align the image using :after in my case, it is not as bad as in fiddle, but it is touching the horizontal line more towards the bottom of the box foreach div instead of aligning with the text inside div.
http://jsfiddle.net/pT7vX/
Just change your position to relative, and tone down the padding. At least I assume this is more what you're after.
div.lnk:after {
background:image;
content: ">";
position:relative;
padding:5px;
background-repeat:no-repeat;
}
http://jsfiddle.net/pT7vX/1/
hope this helps.
I tried to vertically align a span in a div by css line-height and div height.
All works fine, but the center span shifts to the bottom when the icon span is added.
Could anyone give me a hint? Thanks.
<span class="icon"></span>
Failed at vertical align
http://jsfiddle.net/9CJvm/
Works fine without icon span
http://jsfiddle.net/9CJvm/1/
In this instance, you could add vertical-align:middle to the span.icon element:
The default value for the vertical-align property is baseline; thus the element was being aligned at the base of the parent element.
UPDATED EXAMPLE HERE
.icon {
vertical-align:middle;
background-repeat:no-repeat;
background-image:url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/50264_300699565862_8082907_q.jpg);
height:50px;
width:50px;
display:inline-block;
}
You can use vertical-align:middle for both span.center and span.icon.
I'm new to css and have done several exercises on websites such as code academy but am now experimenting with my own page and lack much practical experience.
I know that you can wrap text around an image using "float" but I want to keep the text in a straight line and border. However, the border and background ignore the position of the image and run behind it. Whats the best way to position then a paragraph and border with an image so that the border will stop against the image?
these are the sections that would be relevant to this:
img {
margin:5px;
float:right; }
p {
background:white;
margin-left:40px;
margin-bottom:0px;
margin-right:0px;
font-family:veranda;
border:2px solid #045FB4;
padding:5px; }
p and img tags have no styling in the body section
example here: http://jimbob.webatu.com/
Any other tips in positioning would be appreciated :)
not sure what you mean when referring to the border, but in order for the text to align around the image properly, use:
p {
text-align: justify;
}
I have a div that will hold some text. The width of the div is fixed in pixels. I want to make sure that if the text takes more space than one line in the div, the text does not overflow and does not wrap to a second line. I just want it to show as much as fits the width of the div on one line. I have been experimenting with
{
overflow:hidden;
height:1em;
width:160px;
}
and it sometimes works, but I don't have the right height. What would be the right height? There is probably a better way to do this. Please let me know. Thanks!
Thanks everyone for your contributions. Here is what worked for me:
for a div:
{
height:1.2em;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
note that both text-overflow:ellipsis; and white-space:nowrap; need to be there for the ellipsis to show.
And for a span note that spans don't have a width so you need to add:
{
display:inline-block;
width:160px;
}
for spans to work
overflow:hidden;
height:1em;
width:160px;
text-overflow: ellipsis;
line-height: 1em;
Will add an ellipsis to text if it overflows the enclosing div and set the div to only use 1em, the height of the container.
white-space: no-wrap will prevent a wrap of the text.
{
white-space:nowrap;
overflow:hidden;
height:1em;
width:160px;
}
Set the line height for the paragraph, then set the div height to be the same.
Just note that text is usually taller than 1 em, 1.3 or 1.4 is usually better.
Try it out here: http://jsfiddle.net/PYA3y/
#mydiv{
overflow:hidden;
height:1.4em;
width:160px;
}
#mydiv p{line-height:1.4em;}
Edit:
in the time I wrote my reply, you got 3 other answers!
Scott had a good idea for using the ellipsis, I've updated the JSFiddle to include it (although it doesn't work??)
If I understand correctly, setting white-space will not give you the result you require... you do want the extra text to be hidden, don't you?
I have placed the corresponding code at http://cssdesk.com/QSwDG
The sprite (referenced as 'circle.png' in the code) is at:
http://i54.tinypic.com/34jas79.png
Objectives:
- To get the list items inline while maintaining the 60x60 size of each.
- To have the lower part of the sprite apear when each link is hovered over: A circle should appear around the link.
- To vertically centre the text within each 60 x 60 container.
I know I can create separate images for each of the links and achieve the desired visual outcome but I want to see if the above is possible.
Thanks
#caseyc
For horizontally and vertical centralization, try it:
li{
float:left;
width:60px;
height:60px;
border:1px dotted green;
display:block;
text-decoration:none;
display:table;
}
a.roll{
vertical-align:middle;
display:table-cell;
text-align:center
}
Now, make the background property on "a.roll".
Cleber.
well... if you don't have to support IE < 8 then you can use display:table-cell;. I'm not entirely versed in display:table so I just floated the lis.
http://cssdesk.com/3hKth
a.roll{
...
vertical-align: middle;
display: table-cell;
}