I want to align some text to the top of a div. It seems that vertical-align: text-top; should do the trick, but it doesn't work. The other things that I have done, such as putting the divs into columns and displaying a dashed border (so I can see where the top of the div is) all work fine.
#header_p {
font-family: Arial;
font-size: 32px;
font-weight: bold;
}
#header_selecttxt {
font-family: Arial;
font-size: 12px;
font-weight: bold;
vertical-align: text-top;
}
#header_div_left {
float: left;
width: 50%;
border: dashed;
vertical-align: top;
}
#header_div_right {
margin-left: 50%;
width: 50%;
border: dashed;
}
The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div. Also text-top only moves the text to the top of the current font size. If you would like to vertically align an inline element to the top just use this.
vertical-align: top;
The paragraph tag is not outdated. Also, the vertical-align attribute applied to a span element may not display as intended in some mozilla browsers.
vertical-align is only supposed to work on elements that are rendered as inline. <span> is rendered as inline by default, but not all elements are. The paragraph block element, <p>, is rendered as a block by default. Table render types (e.g. table-cell) will allow you to use vertical-align as well.
Some browsers may allow you to use the vertical-align CSS property on items such as the paragraph block, but they are not supposed to. Text denoted as a paragraph should be filled with written-language content or the mark-up is incorrect and should be using one of a number of other options instead.
I hope this helps!
something like
position:relative;
top:-5px;
just on the inline element itself works for me.
Have to play with the top to get it centered vertically...
You could apply position: relative; to the div and then position: absolute; top: 0; to a paragraph or span inside of it containing the text.
You can use contextual selectors and move the vertical-align there. This would work with the p tag, then. Take this snippet below as an example. Any p tags within your class will respect the vertical-align control:
#header_selecttxt {
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
#header_selecttxt p {
vertical-align: text-top;
}
You could also keep the vertical-align in both sections so that other, inline elements would use this.
The all above not work for me, I have just checked this and its work :
vertical-align: super;
<div id="lbk_mng_rdooption" style="float: left;">
<span class="bold" style="vertical-align: super;">View:</span>
</div>
I know by padding or margin will work, but that is last choise I prefer.
PS.: I'm not a ux or frontend engineer
.make-it-valign-on-top {
vertical-align: super;
vertical-align: text-top;
vertical-align: top;
}
<span class="make-it-valign-on-top">my text</span>
You can use margin-top: -50% to move the text all the way to the top of the div.
margin-top: -50%;
position:absolute;
top:0px;
margin:5px;
Solved my problem.
The problem I had can't be made out from the info I have provided:
I had the text enclosed in old school <p> tags.
I changed the <p> to <span> and it works fine.
Related
Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.
I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).
Here is the code:
CSS:
.draggable{
color: #ffffff;
background-color:#EE3C96;
display:table-cell;
vertical-align:middle;
font-size:12px;
font-weight:bold;
text-align: center;
width: 90px;
height:90px;
float: left;
margin-left: 10px;
padding: 5px;
}
HTML:
<div class="draggable">
Lost time - employee absence
</div>
<div class="draggable2">
"Safe Place" to work
</div>
<div class="draggable">
Lost resources - employees leaving
</div>
<div class="draggable">
Financial penalties
</div>
And here it is on Codepen:
http://codepen.io/lbarnes/pen/vkrib
draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)
Thanks in advance, hopefully someone can find something as i have tried everything lol!!
I recommend you to use the double span tip to vertically align your multiline text.
First, a simple exemple
And now, adapted to your needs :
<div class="draggable">
<span><span>
Lost time - employee absence
</span></span>
</div>
<div class="draggable2">
<span><span>
"Safe Place" to work
</span></span>
</div>
You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :
$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');
Then, add this CSS to get your vertical alignment :
/* Vertical align */
.draggable, .draggable2 {
display: block;
width: 90px; height: 90px;
line-height: 90px;
}
.draggable>span, .draggable2>span {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
line-height: 20px;
}
Your CodePen forked
You can put the text in the box between <p></p> tag than add in your css the following lines:
.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}
You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
This would center the text inside the div both horizontally and vertically
This works for webkit browsers.For Mozilla
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
and IE
display:-ms-box;
-ms-box-pack:center;
-ms-box-align:center;
More info on browser support
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
I am trying to set a div element on the right top of a web-page which contains a span, a label and a button. I want to bring all the elements in alignment regarding the vertical high (preferably at the middle of the div element). However vertical-align: middle does not work as the elements are cling to the top of the div. They are probably influenced by an external div or Panel (since I use gwt). Should I interfere in the default attributes of the gwt widgets? What other solution can you suggest?
The code:
<div class="{style.topRightDisplay}">
<span style="float:left;">Eingeloggt als: </span>
<g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
<g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
</div>
.button {
float: right;
margin-right: 15px;
}
.loginHTML {
float: left;
}
.topRightDisplay {
float: right;
height: 20px;
width: 200px;
vertical-align: middle;
}
You misunderstand the purpose of vertical-align. See the explanation of vertical-align on MDN
You need to apply vertical-align to the child elements, not the parent.
Without knowing what your markup looks like, I suggest this:
.topRightDisplay input,
.topRightDisplay button,
.topRightDisplay span{
vertical-align: middle;
display: inline-block;
}
You should also remove the floats. Floats make an item render as a block-level element, which means vertical-align won't work.
Instead you can use display: inline-block. You may need to change the order of the elements in hmtl to get the result you want.
I have a single line of text that looks like this:
GIVE US A CALL AT ###.###.###
I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div.
I can't seem to get this to work... what I am missing?
Current HTML:
<div class="accessSlogan">
<div class="access-slogan-text">GIVE US A CALL AT </div>
<div class="access-slogan-number">###.###.###</div>
</div>
Current CSS:
.accessSlogan{
position: relative;
float: right;
display: inline;
}
.access-slogan-text {
display:inline;
font-size: 1.2em;
line-height: 2em;
padding-right: 6px;
vertical-align: text-bottom;
}
.access-slogan-number{
position: relative;
float: right;
display:inline;
font-size: 1.8em;
line-height: 2em;
vertical-align: text-bottom;
}
Use the <strong> tag and style accordingly.
<div class="accessSlogan">
GIVE US A CALL AT <strong>###.###.###</strong>
</div>
CSS:
.accessSlogan{
float: right;
}
.accessSlogan strong {
font-size: 1.8em;
position:relative;
bottom:0.4em;
}
The point is to use the existing "semantic" HTML to work with you and avoiding over-complicating things. The <strong> tag is what you mean, so use it:-)
The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.
Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it's hard to know if that's necessary or not.
At it's simplest this will achieve it:
.access-slogan {
float: right;
text-transform: uppercase;
}
.access-slogan .access-slogan-number {
font-size: 1.8em;
}
<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>
Note that you can't apply float and display:inline to an element since float applies display:block along with it's own document flow rules. You'll also note I've uppercased the text in CSS rather than in the source HTML, since this is a display artefact.
I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?
use <span> instead of <div>. It will solve your problem
<div>
call me at <span>0000-000</span>
</div>
or
<div>
<span>call me at</span><span>0000-000</span>
</div>
I know to vertically align text to the middle of a block, you set the line-height to the same height of the block.
However, if I have a sentence with a word in the middle, that is 2em. If the entire sentence has a line-height the same as the containing block, then the larger text is vertically aligned but the smaller text is on the same baseline as the larger text.
How can I set it so both sizes of text are vertically aligned, so the larger text will be on a baseline lower than the smaller text?
Try vertical-align:middle; on inline containers?
EDIT : it works but all your text must be in an inline container, like this :
<div style="height:100px; line-height:100px; background:#EEE;">
<span style="vertical-align:middle;">test</span>
<span style="font-size:2em; vertical-align:middle;">test</span>
</div>
the two set of text must have the same fixed line-height and the vertical-align set
span{
vertical-align: bottom;
line-height: 50px;
}
The functionality you are seeing is correct because the default for "vertical-align" is baseline. It appears that you want vertical-align:top. There are other options.
See here at W3Schools.
Edit W3Schools has not cleaned up their act and still, appear, to be a shoddy (at best) source of information. I now use sitepoint. Scroll to the bottom of the sitepoint front page to access their reference sections.
Easy way - use flex:
<div>
abcde
<span>efghai</span>
</div>
<style>
div {
padding: 20px;
background-color: orange;
display: flex;
align-items: center; }
span {
font-size: 1.5em; }
</style>
You technically can't, however, if you have fixed text sizes you could use positioning (relative) to move the larger text down and set the line-height to the smaller text (I'm presuming this larger text is marked up as such so you can use that as a CSS selector)
You can use percentage sizes to reapply the parent's line-height
.big {
font-size: 200%;
line-height: 25%;
display: inline-block;
vertical-align: middle;
}
Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis
An option is to use a table there the different sized texts are in their own cells and use align:middle on each cell.
Its not pretty and does not work for all occasions, but it is simple and works with any text size.
This works
header > span {
margin: 0px 12px 0px 12px;
vertical-align:middle;
}
.responsive-title{
font-size: 12vmin;
line-height: 1em;
}
.responsive-subtitle{
font-size: 6vmin;
line-height: 2em;
}
<header>
<span class="responsive-title">Foo</span>
<span class="responsive-subtitle">Bar</span>
</header>