CSS - how to align different font-sizes to each other?


Tags: css,alignment,font-size

Problem :

I have a small problem with some CSS -> Example on jsFiddle

Simple button:

<button type="reset" id="reset-btn">Reset</button>

CSS rule:

button#reset-btn:after{
    content:" <<";
    font-size:2em;
}

As you can see the "<<" is getting generated through CSS. Is there a way to align these two different font sizes to each other so that the text next to the bigger "<<" is at the vertical center of the button?

Thanks in advance!



Solution :

Wrap the text within a span tag and then apply the style vertical-align: middle to both the button and span

HTML

<button type="reset" id="reset-btn"><span id="reset-text">Reset</span></button>

CSS

button#reset-btn:after{
    content:" <<";
    font-size:2em;
    vertical-align: middle;
}

#reset-text{
    vertical-align:middle;
}

Working Example: http://jsfiddle.net/Eh8TB/3/


    CSS Howto..

    How to center a relative div in my case?

    how to align an element but keep the space it left reserved

    How to conditionally add css properties in jquery (coffeescript)

    Drupal 7.x: how to apply styles to RSS feed in node?

    How to set a External SVG color in HTML using CSS?

    jquery/css how to rescale and crop a large image to fit my display div?

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How to animate through stacked images Javascript

    How is a CSS “display: table-column” supposed to work?

    How do I make text text when you hover the mouse over it?

    How to style a credit card expiration date input field to include spaces and forward slash?

    how to tell org-mode to embed my css file on HTML export?

    How to use sprite css [duplicate]

    How can I stay organized when writing CSS? [duplicate]

    How Can I Remove a Surrounding DIV with jQuery?

    How to display results comming from database in 3 columns using php/mysql/html/css

    attaching div to a specific element for showing with javascript

    Show/Hide & Change CSS functions are not working

    how to set css for Zend form?

    how to add a different css to last mysql query result using php

    How to style the NSString using CSS?

    How to use CSS transforms to translate product info into view

    How to create fixed to screen layout

    How to override Zurb Foundation css properties using rails 3.1?

    How do i get css3pie to work on all Joomla 2.5 pages not just default page

    How to edit CSS file in Objective-C

    CSS Button Animation - How to Accomplish?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How to Extract one images from bunch of image(Image Pack)?