Question on Centering

Discussion in 'CSS' started by 007wood, Nov 6, 2007.

0
  1. #1
    Ok this sound stupid but..
    how do i "center" using CSS?
    The guide i used didnt state it

    THanks,
    007wood
     
    007wood, Nov 6, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Be more specific.

    Center a block level element? Center an inline level element? Horizontally center? Vertically center?

    You probably want to center a block level element, and you have to use horizontal auto margins for that.

    CSS:
    HTML:
     
    soulscratch, Nov 6, 2007 IP
  3. 007wood

    007wood Banned

    Messages:
    1,500
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Oh i meant
    this center in CSS form​
     
    007wood, Nov 7, 2007 IP
  4. fablex

    fablex Peon

    Messages:
    468
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    .yourClass{
    text-align:center;
    }
     
    fablex, Nov 7, 2007 IP
  5. longhornfreak

    longhornfreak Well-Known Member

    Messages:
    2,067
    Likes Received:
    95
    Best Answers:
    0
    Trophy Points:
    140
    #5
    I think you want to center something but have the text aligned left. If that is the case

    

body {
	margin:50px 0px; 
	text-align:center;
	}
	
#Content {
	width:600px;
	margin:0px auto;
	text-align:left;
	}
    Code (markup):
    You can set margins, but I suggest auto.
     
    longhornfreak, Nov 7, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Just remember that text-align: center; on the body and text-align: left; on the #Content selectors are used to replace margin: 0 auto; in Internet Explorer 5.x (and 6 when in quirks mode), and thus aren't needed unless you have to support that particular browser generation (or can't get IE 6 back into standards mode - like with "My Opera" templates for example).
     
    Dan Schulz, Nov 8, 2007 IP
  7. ericindc

    ericindc Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    What about further centering the block element vertically, in additional to horizontally?
     
    ericindc, Nov 8, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You'll have to absolutely position the element, set its top and left position to 50% each, and then set the top and left margins to (negative) half the container's size.

    For example, if I had a Flash file I wanted to be centered within the viewport, here's how I'd do it.

    
[b]CSS Code[/b]
div {
	overflow: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -190px;
	margin-left: -260px;
	width: 520px;
	height: 390px;
}

[b]HTML Code[/b]
<body>
<div>
	<object type="application/x-shockwave-flash" data="c.swf?path=flash-movie.swf" width="520" height="390">
		<param name="movie" value="c.swf?path=flash-movie.swf">
	</object>
</div>
</body>
    Code (markup):
     
    Dan Schulz, Nov 8, 2007 IP