I am trying to achieve something and can't manage to do so.
I have a div with fixed HEIGHT & WIDTH.
I want the text to be centered vertically.
up till now I managed to do so:
<div>
<a>this is a long text</a>
</div>
and it will look like this
-------------
This is a long
text
-------------
which is great
But if the line won't wrap it will look like this
------------
This is short
-------------
.the-div
{
height:29px;
line-height:14px !important;
}
.the-a
{
font-size:12px;
}
I need this to be valigned as well!
I tried using line-height and to play with is with JS to understand if its wrapping or not and then changing the line-height accordingly
Thanks for the help
try this example
http://jsfiddle.net/fcalderan/3HBC4/1/
.the-a
{
font-size:12px;
vertical-align: middle;
}
if you make the line-height same as the height of div, it will automatically vertical centered
the-div
{
height:29px;
line-height:29px !important;
}
To be vertical aligned as well, you'll need to use some display as table hacks. This will allow you to use vertical-align:middle;, achieving the look I believe you desire.
Example
div a{
margin-top:auto;
margin-bottom:auto;
}
Related
I'm attempting to use the CSS :before property to append a word in front of a regular paragraph. I want the remainder of the paragraph to be justified left, so that there is a margin underneath the appended word.
In order to achieve this effect, I've needed to set the height of the :before to an arbitrary height. But, if I don't know how much text will be in the actual paragraph, I have no idea what height I need to in the declaration.
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:block;
float:left;
padding-right:30px;
height:70px;
}
The attached jFiddle might help better explain what I am trying to do.
http://jsfiddle.net/fgpj8w74/7/
Thanks for your help.
Check this Updated Fiddle
You can work with table-cell's so you wont concern about float or height, since they will fit each other automatically.
Just make your .prereq element a display: table, and the pseudo one a display: table-cell:
.prereq {
display: table;
}
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:table-cell;
padding-right:30px;
}
i can never seem to get the vertical align attribute to work. i have a simple div with a small picture inside it (40px high) and i need the text to align vertically in the middle. can somebody shed some light on what im doing wrong here? thanks
HTML:
<div id="back"><img src="../../images/back-button-1.jpg" style="padding-right:10px;" width="40" height="40" alt="back" />Back</div>
CSS:
#back{
width:auto;
height:40px;
background:#C36;
font-family:arial,verdana,helvetica,sans-serif;
font-size:15px;
color:#333333;}
Add this rule:
#back img {
vertical-align:middle;
}
jsFiddle example
Using "line-height" set to the height of the container on an inline element works well in this case as well, but only if it is one line of text.
So you see, I'm having a big problem here. I've already tried tons of solutions, but none have been useful to me. I'm making a custom tooltip, and I'm trying to get the text shown inside it gets vertically centered, but I haven't been able to.
.tooltip {
display:none;
background:transparent url(slides/tooltip_img.png);
font-family:Helvetica;
font-size:16px;
height:157px;
width:149px;
color:#eee;
text-align:center;
line-height:20px;
}
And this here is how I'm trying to make it center vertically:
<div id="tooltip" style="height:62px;margin-left:46px;margin-top:102px;vertical-align:middle">
<img src="supahsource.png" title="Tooltip info"/>
Anyway, I don't get the result I'm trying, can anybody help me out? Thanks a lot.
vertical-align only works with Table elements. Try using position: absolute and if you really want to use vertical-align, use display: table-cell; on the block you wish to vertically align.
I am trying to build a simple div with a span of text inside of it.
<div id="bottom-text">
<span>ONE STOP</span>
</div>
And here is the simple CSS styling I have in effect for "#bottom-text":
#bottom-text{
font-weight:700;
font-size:50px;
text-align:center;
margin:auto;
position:relative;
padding-top:25px;
height:65px;
width:auto;
}
For some reason, the text "ONE STOP" displays partially outside of #bottom-text. (only the top portion of all the letters...) I've tried using padding to fix it but the text then overflows partially into the padding region!
Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I've been testing Chrome and Firefox)
Thanks all.
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
display: inline;
}
<span class="largefont">block level span</span>
Assign a class to the span and play with that.
look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px
65-(50+25) = -10
So you will see only the top 10 pixel of your text.
Set padding-top to a lesser amount, and play with just so it is correct
Check your line-height. Only thing I can think of is you might have some styles elsewhere that are adding some in. Try adding "line-height: 1;" to your existing #bottom-text CSS so that your text is actually 50px high. Or, if you want the text to vertically center in #bottom-text make your line-height match the height of #bottom-text (65px).
http://www.perfectclaims.com/ppiclaimsnew/
I dont understand why the first part of the title is right aligned?
any ideas?
Thanks
<div id="breadcrumb">
That div is creating space. I would guess you want to give it a width of 100% to make it fill horizontally so the title below has the full width to work with.
Incidentally, I was able to find out the information easily by using firebug, which is an extension for firefox.
Because that breadcrumb div is floating in the way of it. You can move the title paragraph down manually, or you can use the CSS property clear to avoid this.
It's because you're floating the breadcrumb trail to the left (and for no apparent reason, I might add). You can either remove the float CSS attribute from #breadcrumb or add clear: both; to .title.
add clear: left; to your paragraph <p class="title" style='clear: left;'>
Just remove the line float:left from id #breadcrumb.. Here float:left is not needed
so your code looks like below
#breadcrumb {
background-color:#FFFFFF;
color:#999999;
font-size:10px;
margin-top:5px;
padding-bottom:10px;
position:relative;
width:550px;
}
Cheers !!
If you are using google chrome, place the mouse over the element, right click and select 'inspect-element'.