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 make an entire square div clickable with CSS?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How to force html/css padding/margin on an element?

    CSS Fonts: Howto convert multiple TTF files into one file?

    How to add CSS to a specific div class - WordPress

    CSS parser/abstracter? How to convert stylesheet into object

    how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

    How to Change Css coding with a link [closed]

    Unable to show progress bar

    how to use CSS clip-path in IE? [closed]

    How to add css-keyframes to vaadin components?

    How to write regular expressions in CSS

    How to place divs three in a row with css and html

    How to set a css style to the last item of CListView?

    How can I have an image float next to a centered div?

    How to change CSS of ng-view when triggering CSS in ng-include

    How to default a custom-styled dropdown to browser default style dropdown

    How to make bootstrap btn-group break into half naturally

    How to format a long
     HTML block suitable for width limited device such as iPhone

    CSS Position Help (horizontal sidebar showing up when animate content over)

    How to fix image to bottom right in gallery

    how to keep the css style after inserting a row to table by jquery

    How to shield a HTML tag from CSS?

    change of encoding shows Weird symbols

    How can I change a table td width using CSS in Spiceworks?

    CSS - How to make position:absolute work not on all 100% screens area

    How can i make infinite flowing background with only CSS?

    The input fields do not have the same width. How to resolve this CSS challenge?

    How to make the page to fit screen width on mobile device?