Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 17, 2014 at 8:46 pm #320719
    mhiller

    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.

    September 18, 2014 at 7:23 am #320932
    Ismael

    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

    September 18, 2014 at 1:07 pm #321134
    mhiller

    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

    September 19, 2014 at 5:43 pm #322020
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    September 19, 2014 at 8:44 pm #322099
    mhiller

    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

    September 20, 2014 at 9:21 pm #322451
    Josue

    Hi!

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

    Regards,
    Josue

    September 21, 2014 at 12:03 am #322501
    mhiller

    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.

    September 22, 2014 at 6:58 am #322820
    Josue

    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

    September 22, 2014 at 1:19 pm #322978
    mhiller

    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.

  • Author
    Posts
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.