I have now been looking for hours (obviously not in the right place!)
Please consider this sample: http://jsfiddle.net/DYLs4/9/
<div id="wrapper">
<span id="text24">Text 24</span>
<span id="text12">Text 12</span>
<span id="icon"></span>
</div>
css:
#text24{
font-size:24px; color:#999;
}
#text12{
font-size:12px; color:#000;
}
#icon{
height:36px; width:36px;
display:inline-block;
background:url(some-icon.png);
}
What I'm trying to achieve is this:
Center vertically the text24 (relative to the image)
Align the bottom of text12 with bottom of text24
Make sure the whole thing work in IE6 -> chrome
Many thanks for your help!
Add vertical-align: middle to your image.
EDIT
Per comments, this solution also requires display:inline-block;.
This is working
http://jsfiddle.net/rizwanabbasi/frsA5/1/
I know most of designers hate use table for layout, but let me try anyway.
You can use valign of table.
Final result
http://jsfiddle.net/rizwanabbasi/frsA5/
<div id="wrapper">
<span id="text24">Text 24</span>
<span id="text12">Text 12</span>
<img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>
#wrapper{
position:absolute; left:0;
}
#text24{
font-size:24px; color:#999; font-weight:bold;
}
#text12{
font-size:12px; color:#000; font-weight:bold; }
#icon{
height:36px; width:36px;
display:inline;
vertical-align:middle;
}
Related
I want to align the date and Summer clearance inside of this table but I want to keep the table centered of the image horizontally. I am open for not using a table to achieve the same effect but I can;'t use Flex. It needs to be supported in most emails.
.outer {
position:relative;
background-color:red;
display:block;
width:650px;
background-image:url(https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg)
}
.inner {
position:absolute;
width:100px;
height:50px;
background-color:pink;
display:block;
bottom:-25px;
right:50%;
transform: translateX(50%);
margin:auto;
}
.hidden{
visibility:hidden;
}
#img-text{
position:absolute;
bottom:40px;
margin:auto;
width:100%;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
text-align:center;
}
<table>
<tr>
<td>
<div class="outer">
<img class="hidden" src="https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg">
<table id="img-text" align="center">
<tr><td>8/30-9/1</td></tr>
<tr><td>SUMMMER CLEARANCE</td></tr>
<tr><td><h3>20% OFF</h3></td></tr>
</table>
<div class="inner">Hello</div>
</div>
</td>
</tr>
</table>
This is what Ive got to work with. Ive tried using margin:auto and text-align with wrappers but can't find a way to align it left in the middle of the image.
Hope this makes sense :)
#img-text tr td { text-align: left ; }
you can target table data inside it and set align as you wish
I'm trying to align text of different sizes on different levels. See the image below to see what I want:
Here is the code I'm trying but it does not seem to work.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:text-top; font-size:14px;">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span style="font-size:14px; vertical-align:bottom;">/month</span>
</div>
Any help would be really appreciated!
You can specify the line height of the spans as well, and therefore influence the vertical alignment.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:top; font-size:14px;">$</span>
<span style="font-size:30px; line-height:27px; vertical-align:bottom;">199</span>
<span style="font-size:14px; line-height:16px; vertical-align:bottom;">/month</span>
</div>
You can use the positions and top css attributes to solve the miner alignment issue in your code. See the updated code. Recommending to write the style alone (Instead of inline styles). The given style (top: 'value';) the following code may change based on the overall style which you are planing to give (same as like the picture with the question)
<div>
<span class="dlr">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span class="perd" >/month</span>
</div>
.dlr{
vertical-align:text-top;
font-size:14px;
position:relative;
top:6px;}
.perd{
font-size:14px;
vertical-align:bottom;
position:relative;
top:-4px;}
Here are the Demo
Try:
.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}
With:
<div>
<span class="a">$</span>
<span class="b">199</span>
<span class="c">/month</span>
</div>
http://jsfiddle.net/z03cynrp/1/
HI now used to this after or before css property as like this
div > span{
position:relative;
display:inline-block;
vertical-align:top;color:#fff;
}
div > span:after{
position:absolute;
content:"$";
font-size:14px;
top:4px;
left:-6px;
}
div > span:before{
position:absolute;
content:"/month";
font-size:14px;
bottom:3px;
right:-38px;
}
div{background:blue; padding:20px 0; text-align:center;}
<div>
<span style="font-size:30px; vertical-align:top;">199</span>
</div>
This has to do with the fact that all the three of them do not have the same line-heights. I could modify your code to align as you wanted.
span {
line-height: 32px;
}
<div>
<span style="font-size:14px; vertical-align:text-bottom">$</span>
<span style="font-size:30px;">199</span>
<span style="font-size:14px;">/month</span>
</div>
PS: Dont use inline style unless you absolutely have to
Here is the html code
<div>
<div class="fractop"><span>11</span></div>
<div class="fracbottom">2</div>
</div>
<div>
<div class="fractop"><span>5</span></div>
<div class="fracbottom">2</div>
</div>
Here is the css code
<style>
.fractop{
border-bottom:solid black 0px;
display:inline-block;
float:left;
margin-top:20px;
text-align:center;
width:100%;
}
.fracbottom{
display:inline-block;
clear:left;
float:left;
width:100%;
text-align:center;
}
.fractop span{
border-bottom:solid black 3px;
}
</style>
I need to make the "divide by" line for fractions stay fixed for 2 digits. It need not become longer or shorter dynamically.
change your .fractop span to this
.fractop span{
border-bottom:solid black 3px;
width: 17px;
display: inline-block;
}
while your approach isn't the best and you're over complicating things, to give you an answer within that approach, change your CSS to this:
.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}
see fiddle here and change it at will
Here,
I have a working demo in this fiddle - put an HR between your two numbers, then style it as a line - does as you prescribe. I also added some inline styling to the parent div to help. You can easily move that to it's own css class though.
http://jsfiddle.net/rrp46faj/2/
<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
<div style="width:20px;"><div class="fractop"><span>5</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
You can use this ⁄
Example : <div class="fractop">4.0000 ⁄ 5.3456</div>
You can find more details here http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm
You can also see MathJax
So I have three divs.
I want them to float like this: 1st /2nd /3rd so all in the same line. With my code it doesnt work. Can you help me?
this is my code: html:
<div id="holder"><h5>something</h5></div>
<div id="visual_holder">something2</div>
<div id="invest"><h2>something3</h2></div>
css:
#holder{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
display:inline-block;
}
#visual_holder{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
float:right;
padding-top:32px;
}
#invest{float:right;}
Thank for your help!
Shouldn't they be all float left?
See example here and update as needed: http://jsfiddle.net/tRNpQ/
#holder{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
float:left;
}
#visual_holder{
font-family: "Times New Roman";
font-size:1.5em;
text-transform:uppercase;
line-height:60%;
float:left;
padding-top:32px;
}
#invest{float:left;}
Try to just exchange the visual_holder and invest divs:
<div id="holder"><h5>something</h5></div>
<div id="invest"><h2>something3</h2></div>
<div id="visual_holder">something2</div>
It appears that you have to first put the rightmost div. See also here: CSS Float multiple left-floated elements and one right floated
Just exchange position of your divs like below
<div id="holder"><h5>something</h5></div>
<div id="invest"><h2>something3</h2></div>
<div id="visual_holder">something2</div>
I have this code :
<div class="richiedi_info_item">
<label>Message</label>
<span style="color:Red;"> *</span>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
.richiedi_info_item_nota
{
float:right;
width:252px;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
float:left;
height:16px;
line-height:20px;
}
and (on every browser expect IE7) the text Message and the link Click is aligned on the same line. Seems that span (with the red *) create a new line.
Why? And how can I fix this problem?
You can remove the floats (left and right) and set the div to display:inline, like this:
.richiedi_info_item_nota
{
display:inline;
width:252px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
EDIT:
IE7 Does not handle floats very well, especially with inline elements (span and label) so I added another div around both of the items and floated it.
HTML
<div class="richiedi_info_item">
<div id="floating">
<label>Message</label>
<span style="color:Red;"> *</span>
</div>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
CSS
.richiedi_info_item_nota
{
width:21px;
clear:both;
float:right;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
#floating {
float:left;
}
WORKING EXAMPLE
JsFiddle Demo