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
Related
I have a simple problem of vertical align top.
<span class="pricing">
<span class="currency>
$
</span>
125
</span
What I want to do is to align the $ sign with the number 125 on the top. So, I apply the current CSS
.pricing {
vertical-align: text-top;
}
.currency {
vertical-align: text-top;
}
But when I do this, the $ sign is aligned vertically to the top, but the number is not. It is still vertically aligned to the middle. the result is like this:
Pricing image
I know that there are several workaround for this like positioning it absolute and add some margin and transform to make it look like I want to. But I'm just curious why it works for the currency class and not the pricing class.
I have a simple setup with buttons and a description of what they do. It looks great when displayed on a full computer screen or a tablet, but gets misaligned once the screen becomes as small as a phone screen. It seems the top of the description paragraph is aligned with the center of the button, as opposed to the top of each element being aligned.
I have tried setting it up first as a table (tr/td) and then as divs/spans to act like a table, but have the same issue with each set up.
A picture of the problem is below, as displayed on chrome set to minimum size. Similar issues arise in other browsers.
I have also included a jsfiddle. You can recreate the issue by decreasing the bottom-right window to a small size (2-3 inches wide, like on a phone):
https://jsfiddle.net/f6fbkrg0/4/
HTML:
<div class="css-table">
<div class="css-tr">
<span class="css-td"><button class="admin-table-button" id="set-time-button" style="width:100%;height:100%">Set Time</button></span>
<p class="button-description">Syncs the time on the machine to the system time of this device</p>
</div>
<div class="css-tr">
<span class="css-td"><button class="admin-table-button" id="night-mode-button" style="width:100%;height:100%">Night Mode</button></span>
<p class="button-description">Toggle alternate color shceme for easy viewing in low-light conditions</p>
</div>
</div>
CSS:
.css-td {
display: table-cell;
padding: .5em 5px;
}
.css-table {
display: table
}
.css-tr {
display: table-row
}
.button-description {
padding-left: 25px;
vertical-align: middle
text-align:
}
.admin-table-button {
margin-top 0px;
}
Two things to watch:
Look at adding vertical-align: top; on your .css-td class
The <p> tag has default browser margins if you don't specify those yourself.
Try setting the top margin to 0 and see if that or a combination of both of these things does the trick for you.
I'm coding a simple portfolio. I'm software developer so I don't have enough knowledge in CSS. I want to align text vertical in a row. Example of what I want to do is bellow.
Some Text 1
Some Text 2
Some Text 3
This is what I actually have at the moment.
Some Text 1
Some Text 2
Some Text 3
As you can see, I want to remove that empty space (blanko). I use <p> tag (paragraph) that I styled in CSS.
p {
display: inline;
color: #888;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
text-align: center;
padding: 8px 30px;
font-family: helvetica, arial, sans-serif;
display: inline-block;
vertical-align:middle;
}
If you still don't understand the question, I posted a picture bellow. The first panel display what I have currently, and the second one, what I want to make. Please note that the second panel is designed.
It appears that your image sizes are causing the offsets. If you can get all of those to be the same width, it should line up.
The two options I can think of off the top of my head are:
The quick and dirty - use a table. If you're going for a design job, this will usually get you passed over though.
Use two divs, set their widths, and in the first one use something similar to an unordered list - this will be for your images and whatever is to the right of the image. In the second one you put the text. These columns you would want to set position: relative, float: left, display: inline-block
What this will accomplish is that your images will be in their own 'box' and aligned to that box. And your text will be in its own 'box' and aligned to that box. The boxes edges won't overlap, so you won't have to worry about variable widths among the individual items. With a border: 0 on the columns, it will have the visual feel of being altogether.
i think this is what you need :
css
p {
vertical-align:middle;
}
here the description of the vertical align on w3schools.com
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
You could also just TAB it in. even though it isn't the prettiest.
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;
}
I would like to present the intermediate steps of a division the pen and paper method on a web page.
The result should like "written" on graph paper / checkered paper.
I could use a table, but WCAG says that's not the way.
I could use a fixed width font and <pre>, but what if I dislike fixed width fonts?
This image explains it better:
http://upload.wikimedia.org/wikipedia/commons/4/40/Division_Schriftlich.jpg
Vertical linage is important.
Here is an example using divs. And size of type of text will work with this. Please note you have to read the columns vertically to add text.
HTML
<div class="col">1<br>1<br></div>
<div class="col">3<br>2<br>1<br>1</div>
<div class="col">0<br>0<br>0<br>0</div>
<div class="col">7<br><br>7<br>5<br>2<br>1</div>
<div class="col"><br><br><br><br>0<br>5</div>
<div class="col"><br></div>
CSS
.col {
border: 1px solid black;
display: inline-block;
float: left;
}
Example with borders (to show vertical alignment) here
Example without borders here
A method using non-breakable spaces, for example:
1307<br>
120<br>
107<br>
105<br>
will not align properly. Therefore discarding horizontal alignment, I think vertical alignment is the best option.
Here is an example with the enhanced layout