By glitz on

im using panels and i have inserted a cck image field.

when displayed on the panel page is aligns left. Id like to center it within the page
My guess was to apply a css class "center" but its not working.

any suggestions?

thx
chris

Comments

theabacus’s picture

theabacus commented

http://www.thesitewizard.com/css/center-div-block.shtml

glitz’s picture

glitz commented

ok so without knowing css this is what i gather,

add

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}

to my themes css file, then in the css class for the panel pane i type in "content".

theabacus’s picture

theabacus commented

"#content" refers to a ID called content. ".content" refers to a class. So you would want it to be...

.content {
width: 700px;
margin-left: auto;
margin-right: auto;
}

Here is an example of classes and IDs

<div id="content"></div>

#content {
width: 100px;
}

-- OR --

<div class="content"></div>

.content {
width: 100px;
}

Just make sure the .content width is SMALLER in width than the parent div. For example if the parent div is 100 px wide and the child div is 200 px wide...you can't center a 200px div inside a 100px div...

Oh, and don't use the class .content. It is quite likely that that class name is already used by the theme. Use something more unique like .myUniquePanelName or whatever.

geneatwell’s picture

geneatwell commented

While this works, it does not work in the way I was hoping, so pardon me for another neophyte panels/css question.

I am trying to center a views block within a panel pane, not just the pane itself. The above code allows the pane to be centered in the column of whatever width I choose, but the content inside the pane is still left justified and I want the views block to be centered within that pane.

Any idea how to accomplish that?

Thanks in advance!

darrenbang’s picture

darrenbang commented

Put your view block inside a Div element and give like margin: 0 auto;

margin: 0 auto; means

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

div
{
margin: 0 auto;
//your view block coe;
}

More info....Div on center

Darren