I'm trying to center a table vertically within another div, but I'm getting results that seems to be off by a few pixels vertically (in FF at least).
Is there some default values somewhere throwing the vertical align off?
Example:
http://jsfiddle.net/9hRnp/
Note:The code is produced by Jquery and is to show the problem only so that's why i have width and height values on each <TD>
Adding a vertical-align:middle to the findpath-content id should solve your problem.
#findpath-content {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Related
I am trying to typeset a displayed equation in HTML, together with an equation number. The equation is rendered as an image, the equation number is given as text:
<p>some text
<span style="display: block">
<span>(1.7)</span>
<img alt="[some equation]" src="img.png">
</span>
some more text.</p>
The result is meant to look similar to how LaTeX would typeset a displayed equation:
The equation number and the formula should be vertically centred, i.e. the middle of (1.7) should vertically align with the middle of the image. I can achieve this using vertical-align: middle.
the image for the formula should be horizontally centred within the width of the surrounding paragraph. I can achieve this using text-align: center.
The left edge of the equation number should horizontally align with the left edge of the surrounding paragraph. I can achieve this using float: left, but only for the price of breaking the vertical alignment.
I can get either the vertical or the horizontal alignment right (see this jsfiddle), but I failed to get both horizontal and vertical alignment to work simultaneously. How can I get the equation number to display correctly?
The result is meant to be portable to different ebook readers, so I cannot use JavaScript to move things around.
I have made couple of changes to your code. See this JSFiddle
.displayed {
margin: 1ex auto;
display: table;
text-align: center;
width: 100%;
}
.eqn {
vertical-align: middle;
}
.eqno {
display: table-cell;
text-align: left;
}
I hope this helps.
Amrinder
I was trying to create a registration form and I encountered a problem.jsfiddlehere
Output is as shown in image below
As shown in the image I want the address to be at the top of the line as indicated without using style position relative or absolute. Is it possible to fix that with margin or padding. And the other thing is why the address text is appearing in the bottom, doesnt it be at the top by default? Is it because of textarea?
Thanks in advance
To align verticaly 2 inline-block elements, you can use vertical-align.
In your case:
.container span {
padding-left: 40px;
display: inline-block;
width: 30%;
/* Add vertical alignment */
vertical-align: top;
}
Here is a fiddle.
Add this to your CSS...
#address span{
vertical-align:top;
}
Write the html like this
<span> Address <textarea cols="5" rows="10"></textarea></span>
Add this to your css
span textarea {vertical-align:top;}
This code should keep the label at the top, you will then need to align your texarea to the other text fields
I have a small definition list that I would like to center on the page both horizontally and vertically in four columns. I have the html-element set to display: table and the body to display: table-cell; with vertical-align: middle;.
See this Fiddle. If you change the font-size on line 27 to 4em; (or anything larger than 1em), you will see that on Chrome the content jumps to the wrong position, while it was correct before. On IE the font-size does not matter, it stays in the correct position either way.
If you set the dl to display: block, it works on both browsers as well but I visually need them to be displayed inline.
Am I doing something wrong or is this a bug in Chrome. If so, how can I work around it?
Add
vertical-align: top;
to your dl. Check here http://jsfiddle.net/qVcLE/6/ . Unfortunately display: inline; etc causes that type of issues.
Just wondering why the containers here do not line up.
Could anyone help?
Thank you.
http://codepen.io/anon/pen/jpmtz
If you add
.column { vertical-align: top; }
then it will line it up on the top. It won't be lined up on the bottom because they have different heights. If you make the heights the same with the vertical-align: top, it'll all be lined up perfectly.
they do , it is just that you style inside element rather than the one dispalyed as table-cell;
Set vertical-align to column or even background:
http://codepen.io/gcyrillus/pen/FCltm
They do, in fact, line up vertically. Since the headers (h3 compared to h4) are of differently sized fonts, and there is 0 padding or margin, the top edge comes down.
Try changing the "recent posts" box to h1 (from h4), and you'll line up again, and hopefully that will show you the answer.
Try this:
.column { display: table-cell; vertical-align: top; }
Demo.
this is happening because two adjacent cell you are using with different size of header and your alignment is center...for second cell make align:top;
What I want to do is, to vertically align collapsed blocks on give website:
http://maliyyemenecment.com/?language=en
I tried all possible ways, to align words with bottom side. I mean, constant margin from bottom side. The problem is, can't achieve any good result. Any suggestions?
Thx in advance
.kwicks.horizontal li .block .collapsed has a text-align:right; replace it with text-align: left; (as the "bottom" is actually the left side of the element) and set a text-indent (works for me when making this edit in developer tools)
.kwicks.horizontal li .block .collapsed {
text-align: left;
text-indent: 17px;
}