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.
Related
I'm making an html email and I have some text and an image in a flexbox. I want to right align the image irrespective of the amount of text on the left. I used "justify-content: space-between" initially which would normally do the trick but that's not working with G-Mail. Any alternatives?
Hope you are using the table format for the e-mail part. And FYI, Gmail does not support flexbox.
To make the image align to the right, apply text-align: right; in the parent element of the img tag.
I suppose you are trying to align the text and the image on the same line but image will align on the left and the image on the right...
Try this:
h3 /* (or whatever element you are using for your text) */
{
text-align:left;
display:inline;
}
img{
display:inline; float right;
}
Am trying to align a logo and a menu (to the left and the other to the right), i used class="pull-left" for my logo and class="pull-right" for my menu icon (because i use bootstrap) but when applied this class attribute to this contents (which are inside a div tag) my menu icon always goes to the bottom.
I will like to know why i do encounter this, and also how to fix this.
below is an image of how i want my alignments to look like;
use css float property
float-left {
float: left;
}
float-right {
float: left;
}
or you can use flex-box too.
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'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.
That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.
here's what it looks like:
I want buy to be centered vertically.
Here is the html:
<div class="row-2">
<ul>
<li>Buy</li>
</ul>
</div>
You can set the line height on the text, for example within the active class:
.active {
...
line-height: 2em;
....
}
<div class="row-2">
<ul>
<li><p style="margin-top: 10px;">Buy</p></li>
</ul>
Play with it
You can use vertical-align to move items vertically.
Example:
<div>This is an <span style="vertical-align: -20px;">example</span></div>
This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.
The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: top will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle will align all images so that the middle of the images align with each other, regardless of the height of each image.
You can see visual examples in this CodePen by Chris Coyier.
Hope that helps!
A simple way is to set line-height to the height of the element.
You can use the top margin-top and adjust the text or you could also use padding-top both would have similar visual effect in your case but actually both behave a bit differently.
Try it like this:
.row-2 ul li {
margin-top: 15px;
}
<style>
.row-2 UL LI A
{
margin-top: 10px; /* or whatever amount you need it to move down */
}
</style>
It's simple, just use:
<br />