HTML & CSS: How to put quotation mark and text in same height?


Tags: html,css

Problem :

Can someone please show me how can I make a quotation like that (see the image)?

I have used the default html code for the quotation symbol:

<div>
<span style="font-size=30px">$#8220;</span>
<span style="font-size=12px">Test Text</span>
</div>

But this causes the quotation mark to be stay on top of the text but not at the same height of the text. Can someone please help me with this?

Quotation Mark



Solution :

on the quote:

font-size: 30px;
display  : inline-block;
position : relative;
top      : 10px;

change the top: 10px to whatever you need to


    CSS Howto..

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    How to style this triangle on a circular image?

    How to change header and footer to full width

    How can I vertically align the text in an anchor tag?

    How to center jqPagination widget?

    How do I align a div at the bottom right corner of a web page even if the content is less?

    How to property adjust table?

    How to uncover an image with css and jQuery

    How to write css for that?

    How to indent text in a select drop down menu using PHP & CSS? [REPHRASED]

    How to replicate this CSS sibling selector in jQuery?

    How To Center Align Menu Through CSS?

    How do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]

    UI Challenge - how to draw “connectors” between elements?

    How to make background image position stay same on all resolutions?

    how to change the colour property of tag used for a text

    How to use bootstrap-theme.css with bootstrap 3?

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    Bootstrap How to make a responsive grid degradating in two steps?

    How do I show just one image and center it in a slider?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    How to get ID from CSS to Javascript without getElementByID?

    how to create circle image wrapper

    How to get this partially diagonal shape from an image in CSS

    CSS How to set div height 100% minus nPx

    How to wrap text inside an iframe with designMode on, using css and also javascript if necessary?

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    How to match an index of a CSS class with JavaScript?

    How to use metro css with codeigniter?

    How to dynamically remove all unwanted CSS and JS from page