I am trying to vertically align the text in input and div, but when it can't be exactly in the middle because of odd number of pixels, it's sometimes closer to top edge, and sometimes to bottom one.
This happens only with some font families, and you can notice that increasing/decreasing line height for 1px will change position of the text in div, but not in input. However, input will start to behave the same as div if line height is greater that 23px.
Here is the example:
https://stackblitz.com/edit/angular-pss3zh
I would want for input and div to position the text the same way for any line-height set.
Related
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I have a simple paragraph containing text where each letter is in a <span> so that I can put a background-color on each of them. Basically, this is needed to do text highlighting.
However, the content is scaled up using transform: scale() on the body, which makes gaps appear between each <span>.
An example : http://codepen.io/anon/pen/XbQXBw
By changing the scale back to 1 or any other Integer value, there is no more gap. How to make it go away when scale is a Float value?
Why is it that when you add text into one of two centered <div>s that it shifts vertically?
Here's an example: click here
Two child divs with display:inline-block; centered by the parent div using text-align:center; are centered right next to each other nicely when there is nothing inside of them, but as soon as there is even one letter of text that div shifts vertically.
This happens only with text. How do you fix this?
EDIT: This happens with img elements too. Am I the only one that finds this odd?
You should specify vertical-align to either top, bottom, or middle.. This will control the alignment no matter the content.
EDIT: The reason why this happens is because vertical-align defaults to baseline, which attempts to align the baselines of the content. For example, two boxes with text, one with twice as much as the other, would be aligned in such a way as to have the last line of text in each box vertically aligned to each other.
Because your one box has no content, the baseline is set to the bottom of the box.
I have placed padding left and right on my input text field so that that text inside of the field does not butt right up to the left and right side of the field. This is a standard UI design practice, as you know. The issue I'm facing is I want my input text field to have a 100% width so that it fills the inside of a div, in effect I have no defined a specific pixel value for this input text field, as it is filling the surrounding div container. How would I compensate my width for the padding I place on this field? Do I need to manually to decrease my width, let's say to 93%, until it achieves the same result?
I floated 3 images in divs in the middle of a long section of text. I want to float them so the site keeps it's 'liquid' design, adapting to any width browser window. But if text starts wrapping to the left of them on wide Windows, it looks bad. I'd like them to float, but still be able to clear text around them so they look like a block element. How can I do that?
I thought maybe of sticking in a 100% width div right after the image divs, that's 1px high, and filled with a 1px image that's just the background color. Will that work?
http://www.briligg.com/frailty.html
The images in question are the ones at the beginning of the 'the cause of addiction is stress' section. Line 134 to 146, references the internal style sheet.
Put a clear: left on your section of text following the images.
That appears to be your div with class text though I don't know if you would want to universally apply the clear to all the divs with that class.