Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Center only some childs in a parent container

    Hi guys,

    I have a div with some child elements that I wish to center. I do, however, only wish to center elements with a specific class and not all elements in the div. The usual method would be to apply
    Code:
    text-align:center;
    to the parent element, however, that triggers all its containing elements. How would I trigger only certain types of elements or elements with a specific class inside that div to only center some of the elements?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post a sample of your HTML code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2008
    Location
    Detroit, MI
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    Can you try using the text-align:center on the classes themselves in your css? Or try, margin:auto; on the classes you want centered.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello CaptainB,
    Since the elements you want centered have a class, can you can leave the parent at default text-align: left; and use this method to center the specific class instead?

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    kelisaid, text-align: center; on the classes them selves would only center their content, not the classes.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try

    example:
    Code:
    p.text > a {text-align:center}

  • #6
    New Coder
    Join Date
    Jun 2008
    Location
    Detroit, MI
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    kelisaid, text-align: center; on the classes them selves would only center their content, not the classes.
    Ahh, yes. Thank you for the correction!

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Hi guys,

    Thank you very much for your suggestions.

    Tempz: that does unfortunately not work. I suspect that for centering the contents of the a-tags but not the tags itself.

    The elements that I want to center are inline-block elements with a dynamic width, so the trick with margins does not work.

    To be a little more clear I have posted my code below. The a-tags are childs of a div container with a fixed width. I want the a-tags to be centered within their container but I do not want to center the rest of the container's content, i.e. the h2.

    Code:
    <div class="showHideElement innerElement overview">
    			<h2>Vælg hvad du vil gøre</h2>
    			<a class="overviewButton  btn1 lightbtn" ><span id="writeArticle"></span>Skriv ny artikel</a>
    			<a class="overviewButton btn2 lightbtn"><span id="administerArticles"></span>Administrer artikelarkiv</a>
    		</div>
    (don't mind about the empty span tags - they are used for something).
    Last edited by CaptainB; 12-19-2012 at 10:15 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have you tried it another way...
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .overview {
    	width: 600px;
    	margin: 50px auto;
    	border: 1px solid #333;
    	text-align: center;
    }
    h2 {text-align: left;}
    </style>
    </head>
    <body>
    <div class="showHideElement innerElement overview">
    			<h2>Vælg hvad du vil gøre</h2>
    			<a class="overviewButton  btn1 lightbtn" ><span id="writeArticle"></span>Skriv ny artikel</a>
    			<a class="overviewButton btn2 lightbtn"><span id="administerArticles"></span>Administrer artikelarkiv</a>
    		</div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thank you, Excavator.
    I have thought about that solution as kind of a last resort; the reason why I would like to avoid doing it that was is that the code should be reuseable. If I do it like you suggest, I would have to left-align all other elements instead of just centering the before mentioned elements, ala I would have to remember to left align all other content that goes into the container. But it could be that this would be the only way to do it?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by CaptainB View Post
    Thank you, Excavator.
    I have thought about that solution as kind of a last resort; the reason why I would like to avoid doing it that was is that the code should be reuseable. If I do it like you suggest, I would have to left-align all other elements instead of just centering the before mentioned elements, ala I would have to remember to left align all other content that goes into the container. But it could be that this would be the only way to do it?
    Instead of centering the class, put what needs centered in a containing element so you can use text-align: center;
    Something like this?
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;	
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    .overview {
    	width: 600px;
    	margin: 0 auto;
    	border: 1px solid #333;
    }
    .centerPoint {text-align: center;}
    </style>
    </head>
    <body>
        <div id="container">
    		<div class="overview">
    			<h2>Vælg hvad du vil gøre</h2>
                	<div class="centerPoint">
                        <a class="overviewButton  btn1 lightbtn" ><span id="writeArticle"></span>Skriv ny artikel</a>
                        <a class="overviewButton btn2 lightbtn"><span id="administerArticles"></span>Administrer artikelarkiv</a>
                	<!--end .centerPoint--></div>
    		</div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Hey again, Excavator.

    I'd hoped for a smart CSS solution so that I could keep the html to a minimum - but it's probably not out there! Thank you anyway


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •