Make quote begin at text, not at tag

Question

I'm having some trouble getting my quote standing next to my text. At the moment, the quotation mark is standing on the very left side.

Without centering the text, it works fine, but when I center the text, things get messy.

.center
{
    text-align:center;
}

http://jsfiddle.net/BpTdL/2/

How can I make sure that quote is next to my text, not the tag?

Thanks!

Answer 1

Try changing the blockquote:before block of CSS to be

blockquote:before {
    content: "\201C";
    font-size: 80px;
    color: #7a7a7a;
    display: inline;
    line-height: .22;
    vertical-align: middle;
}

You'll need to adjust the padding-top of the blockquote a little because it gets cut off

jsfiddle

Answer 2

You just need to change this:

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
  }

for this:

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: 0px;           /* Line changed */
  top: -20px;
  color: #7a7a7a;
  }

Is this what you wanted? DEMO

Answer 3

You could try and put the quote and text in divs and use this code to move them around

position:relative;
left:100px;

This will allow you to move to a postion that you want