nyartman nyartman - 1 year ago 105
CSS Question

centering an image in joomla

I'm trying to center a image on a joomla site I'm building. It's a logo that's been placed in the header. Here is a link to the site http://www.gothamtattoos.com/mmp_upgrade/index.php (logo.png at the top is one I'm talking about). I've tried a few different things but my attempts either didn't do anything or they messed with the display of the top menu. I read on here about setting margin to auto and position to relative, etc. but it didn't work or perhaps I'm adding it to the wrong place.

Here is the section of the index.php file that pertains to the logo. I'm not much a coder at all and only slightly know what I'm doing, so descriptive replies will be greatly appreciated. Thanks in advance for the help.

$logopath = $this->baseurl . '/templates/' . $this->template . '/images/logo.png';
$logo = $this->params->get('logo', $logopath);
$logoimage = $this->params->get('logoimage');

$sitetitle = $this->params->get('sitetitle');
$sitedescription = $this->params->get('sitedescription');

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>


<div id="wrapper">

<!-- TopNav -->
<?php if($this->countModules('position-13')): ?>
<div id="topnav_wrap">
<div id="topnav">
<jdoc:include type="modules" name="position-13" style="xhtml" />
<?php endif; ?>

<div id="header_wrap">
<div id="header">

<!-- Logo -->
<div id="logo">

<?php if ($logo && $logoimage == 1): ?>
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" /></a>
<?php endif; ?>
<?php if (!$logo || $logoimage == 0): ?>

<?php if ($sitetitle): ?>
<a href="<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($sitetitle); ?></a><br/>
<?php endif; ?>

<?php if ($sitedescription): ?>
<div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div>
<?php endif; ?>

<?php endif; ?>


<!-- Topmenu -->
<div id="topmenu">
<jdoc:include type="modules" name="position-1" />

Here is the css

Lee Lee
Answer Source

To centre the image, you only need to adjust some CSS.

#logo {
#logo img {
    margin:0 auto;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download