Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: center content

  1. #1
    Junior Member
    Join Date
    Jan 2018
    Posts
    4
    Member #
    58160

    center content

    Hi all,

    I was wondering if anyone could help. I am trying to center all my content on the web pages but didn't succeed.

    Here is what I have done:
    .wrapper {
    max-width: 960px;
    margin: auto;
    background: white;
    padding: 10px;
    color: blue;
    }

    it should work but for some reason my content is to far to the right,

    thank you for any input.

    Carmen

  2.  

  3. #2
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    When you say content, do you mean text or every element within the wrapper class?

    If it's content try text-align: center; or if it's elements, you'll need to set a width and define the margin as auto.

    If you could provide some live examples or at least a picture, I'll try to help.

  4. #3
    Junior Member
    Join Date
    Jan 2018
    Posts
    4
    Member #
    58160
    Thank you for your help.
    I am new to this and I am trying to help a small nonprofit able organization.
    Here is the link to the site I am trying to center. If you look at the site you will notice that the content is more to the left and not in the center at all.

    http://thepinkvibe.org/

    I have the same problem with other websites too. I just can't figure out how to center it.

    any help is greatly appreciated.

    Carmen
    Last edited by aaarmensk; Jan 17th, 2018 at 05:55 PM.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The title, meta and link tags go inside head, and the doctype goes before <html> and doesn't have a closing tag. You need to fix these things, because they're going to cause issues.

    That said, the CSS you posted is for an element with the class "wrapper", but you don't have an element with that class. Therefore, the rules in that CSS code won't apply anywhere.

    Centering elements isn't overall difficult. There are a lot of ways to do it. The way you're trying to do it will work if you have an element with the relevant class.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Jan 2018
    Posts
    4
    Member #
    58160
    Hi Ron,
    thanks for your help.

    I fixed the first issues in the head.

    But I don't understand what you mean by it needs an element. I thought when I put a div around it it would be an element. Can you please give me an example.

    Thank you
    Carmen

  7. #6
    Junior Member
    Join Date
    Jan 2018
    Posts
    4
    Member #
    58160
    Please someone help. How can I center content. I seem to have the same problem with every site I create. Thank you very much Carmen

  8. #7
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    6 times
    Firstly, you need to fix your doctype declaration by changing it from this "<DOCTYPE html>" to this "<!DOCTYPE html>". Ideally adding the closing </html> tag to the end of the document would be a good idea too.

    I would recommend using Flex, instead of floating the elements int he way you are. If you are going to float them like that, firstly, you should really be floating them left, not right and ideally you should also have a clearfix applied to the container to make the elements behave themselves.

    It would also be better to wrap the gallery elements within a parent div element. This will make it allot easier to control the gallery elements.

    I have cleaned up your HTML slightly and wrapped the header as well as the gallery elements int heir own seperate containers as well as fixing the doctype declaration. You can find the HTML here:

    https://gist.github.com/cosmicwheels...c66bada73cd68b

    Below i've the CSS you can add to the end of your CSS file. This CSS uses Flex to display the gallery boxes. This is just a rough example, you'll still need to look into Flex and address any cross browser issues yourself. You can view the CSS here:

    https://gist.github.com/cosmicwheels...e110c7e0aba71a

    For future referance, if you're having trouble with centering elements using auto margins, make sure your markup is correct if it's displaying incorrectly. Also look into using a "clearfix" on the parent element of elements where you have applied floats to them as floats tend to cause all sorts of unexpected and annoying problems if you don't really know what your doing.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com