I am trying to implement something where my text width is identical to one another or very close for example. I have a few div tags with some text that is unchangeable react component that is injecting a variable into the div tag for example {reactVar}
however my text that is returned aligns like so for mr following divs.
test
test
test
tets
tetstetetse
all of my text are not aligned accurately they are all over the place. Any suggestions to have them all the same width and aligned? I have tried text align center and margin auto and none work.
Related
This html/css:
Left
Produces this:
But I want this:
Left
ThisWontBeVisible
The class ui-btn-icon-notext will remove the text ("ThisWontBeVisible") within the <a>. However, if there is no text within the <a>, it will shrink the button to a short height. Seems like a hack but also likely the simplest way to achieve the desired result.
You can do it by setting the height attribute to 1em on all of your .ui-btn elements, or any height greated than 1em. This will set them all to the same height regardless of whether they have text inside them or not.
I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing?
I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we want.
Ex. Right-click a <p> tag on this page and hover the element in the dev console to notice that the top/bottom of the text isn't flush with the bounds of the actual <p> element.
Is it possible to make the cap height and baseline flush with and
element's bounds?
Is this spacing possible to edit in CSS?
Is there a rule/calculation that determines what this spacing is?
you want to use something called css reset block
http://html5doctor.com/html-5-reset-stylesheet/
and also if your container is a div
use display:inline; to wrap exactly onto the element inside.
Is it possible in CSS only to accomplish to get a input field and button vertically aligned like in my pen:
http://codepen.io/rpkoller/pen/BhKbp/
and then manage that the button aligned to the right has a fixed width and margin to the left to the input field and that the input field is filling the rest of the space fluidly.
Getting the button to the right might work with a float but with that solution the button isn't vertical aligned in the middle anymore. :( and getting the input field fill the remaining space i haven't managed at all. :/
Best regards Ralf
You can use specifity of floatting element and layout of block elements .
<button> first in the flow, floatting before a block wrapping the input. wrapper at overflow:hidden and <input/> at width:100%;.
see test : http://codepen.io/anon/pen/Hdiyq
This is live demo: http://jsfiddle.net/9Y7Cm/5/
Everything is fine with that, until the text width there is higher than the div width.
If you will add some text there, the line will break and the text will be displayed under of the image instead of next to the image (as you can see in my first fiddle).
Here you can see what happends, it text width is higher than div container width:
http://jsfiddle.net/9Y7Cm/12/
Is there a way to fix that?
Give your right side content a width and float it to the right, like so:
http://jsfiddle.net/9Y7Cm/14/
For a cleaner result, i suggest you separate both sides of your content, left and right, with a class and width and then float them to set them side by side.
Just remove display:inline-block; from the CSS for the span element (jsFiddle example).
More information on display:inline-block.
inline-block: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
The problem is with display:inline-block for the span. Remove it, and the text will be on the same line
I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...
any assistance here may very well help me stave off a fit of insanity ;)
If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here