Jump to content
Sign in to follow this  

Center blockquotes?

Recommended Posts


I would really like to center some blockquotes I have on a clients spec site.


this is the current code I'm using because it's the closest way I can get it centred:



[span5][pl_blockquote cite="Anonymous"] A certain darkness is needed to see the stars.[/pl_blockquote][/span5]



It's off a bit but I really like the style of the blockquote.


I've tried using the "center" shortcode but it centers the text and moves the line to the left edge of the page.

I would like to have it look like the attached file just completely centred on the page.



Any help would be great


Share this post

Link to post
Share on other sites



Not sure what you issue is, I have just used the PageLines grid (not the shortcodes plugin from the store) and my blockquote looks like your image.




Code I used was this:


<div class="row">
<div class="span4"></div>
<div class="span5">[pl_blockquote cite="Anonymous"] A certain darkness is needed to see the stars.[/pl_blockquote]</div>
<div class="span3"></div>

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Is there a way to center it without using the grid. If you read my post Danny, the quote is not perfectly centered, that's the issue. With longer or shorter quotes its even more noticible. And if you read the code you would also realize that a span of 4 5 & 3 doesn't seem centered either. If you try say 3 6 & 3 you will notice that the quote lines up more to the left. I was cheating it more towards the center.

Share this post

Link to post
Share on other sites

Well the I thought you wanted to use the grid layout.


Why not try span4 x3:

<div class="row">
<div class="span4"></div>
<div class="span4 tac">[pl_blockquote cite="Anonymous"] A certain darkness is needed to see the stars.[/pl_blockquote]</div>
<div class="span4"></div>

If that doesn't work you're going to need to use custom CSS. I recommend you inspect the blockquote element using either Firebug or your browsers built-in web dev tools.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi to all,
      I have some simple html & CSS for a block quote like the following:
      <bockquote>test test test test test test test test test test test test test test test test test test test test </blockquote>
      blockquote {
        background: #f9f9f9;
        border-left: 10px solid #ccc;
        margin: 1.5em 10px;
        padding: 0.5em 10px;
        quotes: "\201C""\201D""\2018""\2019";
      blockquote:before {
        color: #ccc;
        content: open-quote;
        font-size: 4em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
      blockquote p {
        display: inline;
      However, this won't work in DMS. I created a simple webpage using an index.html and added the above code and everything worked.
      In DMS I add the code and it works until I press publish and refresh the page and I see the following image attached.
      What is going wrong please?
      Thanks, James 

    • Jeremiah
      By Jeremiah+
      Does anyone know the custom css to align the menu navigation links to the center? 
    • suerama
      By suerama+
      On my site, on the homepage of http://ramacommunications.net/ there are two Quotes sections. Often, when you click the arrows the first time through in Firefox or Chrome the slider moves too far, skipping one or a couple of quote panels. 
      This doesn't occur on every visit. Sometimes you can go back and find the skipped quotes. And once you cycle through the slider the action may improve. But when it does skip, it is quite frustrating.
      The slider works fine in Safari.
    • suerama
      By suerama+
      My quotes section often has black lines appearing in it. Sometimes it's 1 thin black rule that sits under the quote, other times, in some browsers the lines appear as you switch slides, and are of varying width.  
      At one point I tried to change the color of the slider background color to black as a quick fix, but that change did not register (though it appears correctly in the UI.)
      I found a forum answer that said that the quotes slider uses the background color of the site, so I thought that was an issue, but the background color for my site is white, not black.
      I have Quotes sliders on these pages, and the black lines often appear on one of these sliders and not the other, in unpredictable ways. 
    • kwp4petar
      By kwp4petar
      Dear Support forums,

      I'm trying to vertically center a Quick Slider so that when someone with a huge monitor loads the page, the quick slider moves to the center of the screen (as I want to avoid resizing unless you guys have a way to resize a QuickSlider to fit the width of the person's screen, rather than the height).

      Here's what my landing page looks like on my laptop (15" screen):

      And here is a photo of the landing page (different slide, but same quick slider) on a 32" iMac fullscreen:

      I'm open to any suggestions, especially any resizing ones since I can't seem to get sizing done well with dms2.