Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #320719

    Is it possible to center a less than full width layout element on page? Say use a 4/5 or 3/4 width as the ONLY layout element, but have it centered on the displayed page–it always seems to go far left or right. Mike.

    #320932

    Hi mhiller!

    Thank you for using Enfold.

    If you’re trying to center align an element, just add a text block or code block. Add a html div like this:

    <div class="avia-align-center">CENTER CONTENT</div>
    

    Add this on Quick CSS or custom.css:

    .avia-align-center {
    text-align: center;
    }

    Cheers!
    Ismael

    #321134

    Hi Ismael,

    Please take a look at this page: http://www.online-moneymakers.com

    – I used a 4/5 element for all content.
    – I added a code block at the bottom of the 4/5 element that included the div statement
    – I added the CSS in style.css file of the theme.

    The content is still not centered and “CENTER CONTENT” appears at the bottom of the page.

    Thanks,

    Mike

    #322020

    Hey!

    Please add following code to Quick CSS as well

    .page-id-15 .avia_textblock {
    text-align: center;
    }

    Best regards,
    Yigit

    #322099

    Thanks! Your CSS centers the text within the 4/5 Layout Element, but I need the 4/5 element itself centered on the page (using only one Layout Element on the page). Mike

    #322451

    Hi!

    In order to achieve what you want you’d need to create something like this:
    http://screencast.com/t/emOAiJoOPMT9

    Regards,
    Josue

    #322501

    Yes, your screen shot is what I started out with, but I needed the width of a 3/4 Layout Element centered on my home page and because there are no 1/8 Layout Elements to go on each side :-(, I am using the 3/4 Element alone. So it displays far left and that is why I had the question about “centering” a single element. Any other work arounds you can think of?? Thanks, Mike.

    #322820

    Hi!

    I’m afraid that’s not possible out of the box. One thing you can do is modify the width values of one of the available column combinations in the css/grid.css file so you kinda get a 1/8 element.

    Regards,
    Josue

    #322978

    Thanks. It is good to know about the css/grid.css grid file, as I will need it in the future. For right now, I used Ismael’s suggestion of CSS that he posted in the other thread:
    .home .flex_column.av_three_fourth.first.avia-builder-el-1.avia-builder-el-no-sibling {
    float: none;
    margin: 0 auto;
    }
    Thanks for everything!! Mike.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to Center a Narrow Layout Element on a Page’ is closed to new replies.