How to center my” Top” image in my page?

  • Hi , i finally could add an image at the top of my banner , wich is what i want .

    its well placed vertically but i want it centered , i want it just where it is but centerd.

    How do i do that ?

    what i did to get mi image where it is is to write this code at the bottom of the header template : 

    </head>
<div class="span-24 header">
 <img src="https://www.tweakingknobs.com/wp-content/themes/fancy/img/tweakingknobs.jpg">
</div>

    But how do i get it centered ?

    Thanx !!!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter giorgiomartini

    (@giorgiomartini)

    my web is https://www.tweakingknobs.com

    Try adding:

    .span-24 {text-align:center;}

    to the bottom of style.css

    Thread Starter giorgiomartini

    (@giorgiomartini)

    i just pasted that code at the bottom of the styles.css file but that aint working any other ideas?

    thanx !

    Can you copy and paste the span-24 bit from your style.css to here please.

    Thread Starter giorgiomartini

    (@giorgiomartini)

    thanx , i see many span -24 parts , i paste all the code better :

    /*
Theme Name: Fancy
Theme URI: https://www.azmoney.co.uk/wordpress-themes/fancy
Description: "Fancy" is a free WordPress theme which really lets your blog stand out from the crowd. Make your blog unique by changing the main blog color (pink, yellow, green), background pattern (available over 20 background variations), banner etc through an options page. In addition you have the ability to choose the color of sidebar blocks (violet, yellow, green). Tech folks might find interesting that we built this theme based on css framework "Blueprint". Valid CSS & HTML.
Version: 1.1.0
Author: AZ Money
Author URI: https://www.azmoney.co.uk
Tags: fixed width, two columns, right sidebar, widget ready, valid XHTML, valid CSS, simple, white, blue, black, professional, seo friendly, typography, minimalistic, gravatars, avatar, 1024px, clean, adsense ready, widgets, professional, premium, option page, bluperint, grid, fancy

	The CSS, XHTML and design is released under GPL:
	https://www.opensource.org/licenses/gpl-license.php

	Blueprint CSS Framework 0.7.1
	https://blueprintcss.googlecode.com

	* Copyright (c) 2007-2008. See LICENSE for more info.
	* See README for instructions on how to use Blueprint.
	* For credits and origins, see AUTHORS.
	* This is a compressed file. See the sources in the 'src' directory.

	== STRUCTURE: ========================
	* Page width:            940 px
	* Number of columns:     24
	* Column width:          20 px
	* Margin width:          20 px
	======================================

*/

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* typography.css */
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
/* p img {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;} */
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;background:#C3D9FF;}
th, td {padding:4px 10px 4px 5px;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/* grid.css */
.container {width:940px;margin:0 auto;}
.showgrid {background:url(img/grid.png);}
body {margin:1.5em 0;}
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right: 20px;}

div.last {margin-right:0;}
.span-1  { width: 20px;}
.span-2  { width: 60px;}
.span-3  { width: 100px;}
.span-4  { width: 140px;}
.span-5  { width: 180px;}
.span-6  { width: 220px;}
.span-7  { width: 260px;}
.span-8  { width: 300px;}
.span-9  { width: 340px;}
.span-10 { width: 380px;}
.span-11 { width: 420px;}
.span-12 { width: 460px;}
.span-13 { width: 500px;}
.span-14 { width: 540px;}
.span-15 { width: 580px;}
.span-16 { width: 620px;}
.span-17 { width: 660px;}
.span-18 { width: 700px;}
.span-19 { width: 740px;}
.span-20 { width: 780px;}
.span-21 { width: 820px;}
.span-22 { width: 860px;}
.span-23 { width: 900px;}

 .span-24 {text-align:center;}

.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

div.border{padding-right:9px;margin-right:10px;border-right:1px solid #eee;}
div.colborder { padding-right:11px;margin-right:10px;border-right:1px solid #eee;}
.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}

.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background:#fff;color:#fff;}
.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* custom */
body {margin: 0;}
pre, code {white-space: normal;}
body {color: #252525}
a:focus, a:hover {color:#0090fe;}
a {color:#0090fe;text-decoration:underline;}
pre, code, tt {font-family: Arial;}
th, td {padding:3px 4px 3px 10px;}
ul, ol {margin:0;}
table {margin-bottom:3px;}
p {line-height: 1.75em; margin-bottom: 15px;}
label {font-weight: normal;}
.showgrid {background:url(img/grid.png) repeat scroll 17px 0;}
h3 {font-size:1.5em;line-height:1;margin-bottom:0.75em;}
.small {font-size: 12px;}

.fl {float: left;}
.fr {float: right;}

/* 100% height */
html, body {
	height: 100%;
}
.main {
	min-height: 100%;
}
* html .main {
	height: 100%;
}

div.main {
}

div.container {
	background-color: #FFFFFF;
	padding: 30px 17px 20px 17px;
}

div.header {
	margin-bottom: 20px;
	/* background: white url(img/bg-header.gif) no-repeat right 0; */
}
	.header .name, .header .name a {
		font-size: 68px;
		font-weight: bold;
		margin-bottom: 0 !important;
		padding: 0;
		line-height: 1;
		text-decoration: none;
		vertical-align: baseline;
	}
	.header span.bubble img, .header a span.bubble img {
		padding-bottom: 31px;
		padding-left: 3px;
	}
	.header .slogan {
		font-size: 26px;
	}

div.menu {
	margin-bottom: 0;
}
	.menu ul {
		background-color: #252525;
		display: block;
		height: 35px;
		margin: 0;
		/* list-style-type: circle;
		list-style-position: inside; */
	}
		.menu li {
			display: block;
			float: left;
			font-size: 19px;
			padding: 0;
			background: url(img/sep.gif) repeat-y scroll right 5px;
			position: relative;
			margin-right: -1px;
			font-weight: bold;
			line-height: 1.85em;
		}
			.menu li a {
				color: #FFFFFF;
				text-decoration: none;
				padding: 7px 20px 7px 20px;
			}
			.menu .current_page_item, .menu li a:hover {
				color: #FFFFFF;
				height: 35px;
			}
		li.feed {
			float: right;
			margin: 0;
			background: none;
			padding: 0;
			!margin-top: 7px;
		}
			li.feed img {
				margin: 0;
				padding: 0;
			}
			li.feed a:hover {
				background: none;
			}
div.banner {
	margin-bottom: 20px;
	padding: 0;
	z-index: 0;
	top: 0;
	position: relative;
	height: 170px;
}
	div.banner img {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
	}
	div.banner .search-wrapper {
		z-index: 6;
		position: absolute;
		left: 0;
		top: 135px;
		height: 35px;
		background-color: #252525;
		padding: 0;
		opacity: 0.9;

		filter:alpha(opacity=90);
	}
		.search {
			color: white;
			float: right;
			margin-top: 6px;
			!margin-top: 5px;
			margin-right: 20px;
		}
			.search label, .search #s {
				margin-right: 15px;
				font-size: 13px;
			font-weight: normal;
			}
			.search #s {
				width: 200px;
			}
div.content {
	margin-bottom: 0px;
}
	.post-wrapper ul {
		list-style-position: outside;
		list-style-type: none;
		margin: 0;
	}
		.post {
			margin-bottom: 30px;
		}
			/* Actual post's styling */
			.post p {
				margin: 0 0 15px;
			}
			.post ul, .post ol {
				list-style-position: inside;
				margin: 0 0 15px 15px;
			}
			.post ul {
				list-style-type: circle;
			}
				.post ul li, .post ol li {
					margin-bottom: 5px;
					padding: 0;
				}
			.post code {
				margin: 0 15px;
				padding: 0.75em 15px;
				display: block;
				font-family: monospace;
				color: #252525;
				border: 1px dashed #cccccc;
				clear: both;
			}
			.post blockquote {
				margin: 0 15px;
				clear: both;
			}
				.post blockquote p {
					/* padding: 1em;
					background-color: #252525;
					color: white; */
					font-style: italic;
					padding: 0.75em 15px;
					color: #252525;
				}
			.post gallery {

			}
				.post .gallery-item {
					margin: 0 0 15px 0;
				}

			.post p, .post a, .post span, .post li {
				line-height: 1.75em;
			}
			.post a:hover {
				color: white;
				text-decoration: none;
			}
			.post .title, .post .title a {
				display: block;
				float: left;
				margin: 0 7px 5px 0;
				!margin-bottom: 13px;
				font-size: 27px;
				line-height: 1.25em;
				font-weight: bold;
			}
				.post .title a {
					color: white;
					text-decoration: none;
				}
			.post h2 a:hover {
			}
	.post span.no {
		font-size: 12px;
		padding: 2px 3px;
		color: #FFFFFF;
	}
	.post .text-header {
		margin-bottom: 0;
	}
	.post img {
		margin-top: 5px;
		margin-bottom: 15px;
	}
	.post .wp-smiley {
		float: none;
		padding: 0;
		margin: 0;
	}
	div.info-small {
		margin-bottom: 15px;

	}
		div.info-small span {
			color: #999999;
			margin-right: 20px;
			/* border-right: 1px solid #999999;
			padding-right: 15px; */
		}
		div.info-small span.cat {
			border-right: none;
		}
		div.info-small span, div.info-small span a, span.tag, span.tag a {
			font-size: 12px;
			text-transform: uppercase;
		}
		span.date {
			background: url(img/clock.gif) no-repeat 1px 0;
			padding-left: 22px;
		}
		span.author {
			background: url(img/person.gif) no-repeat 0 0;
			padding-left: 22px;
		}
		span.cat {
			background: url(img/folder.gif) no-repeat 0 2px;
			padding-left: 22px;
		}
		span.tag {
			background: url(img/tag.gif) no-repeat 0 0;
			padding-left: 22px;
			color: #999999;
		}
	div.info {
		margin-bottom: 8px;
	}
		div.info span {
			margin-right: 15px;
			color: #999999;
		}
	.hr {
		margin-bottom: 7px;
		!margin-bottom: 11px;
	}
		.hr img {
			margin: 0;
		}

/* ============= Sidebar ============= */
.sidebar {

}
	.sidebar .paddings {
		margin: 0;
		padding: 0 20px 13px 20px;
		display: block;
	}
	.sidebar div {
		margin-bottom: 15px;
	}
	.sidebar h3 {
		padding: 0 15px 12px 15px;
		margin-bottom: 12px;
		font-weight: bold;
		background: url(img/sep-hor.gif) repeat-x 0 bottom;
	}
	.sidebar div ul, .blocks div ol {
		list-style-type: circle;
		list-style-position: inside;
		padding-bottom: 0;
	}

	.sidebar div li {
		margin-bottom: 7px;
		font-size: 13px;
	}
	.sidebar div a {
		color: #252525;
		padding: 2px;
		color: white;
		background-color: #252525;
		text-decoration: none;
	}
		.sidebar div a:hover {
			color: white;
			text-decoration: none;
		}
		.sidebar div.pink a:hover {
			color: white;
			text-decoration: none;
		}
	/* default yellow color */
	.sidebar div {
		background: #FEB400 url(img/bg-sidebar-yellow.gif) no-repeat right 5px;
		padding-top: 15px;
		padding-bottom: 0px;
	}
	.sidebar div div, .sidebar div p {
		padding: 0;
		margin: 0 0 7px 0;
		background: none;
	}
		/* bright */
		div.pink {
			background: #FE0059 url(img/bg-sidebar-pink.gif) no-repeat right 5px;
		}
		div.yellow {
			background-color: #FEB400;
		}
		div.green {
			background: #92CE0C url(img/bg-sidebar-green.gif) no-repeat right 5px;
		}
		/*
		div.blue {
			background-color: #0C27CE;
		}
		div.red {
			background-color: #FE4200;
		} */
	.sidebar caption {
		background: none;
	}

/* ============= Footer ============= */
div.footer {
	padding-top: 15px;
}
	div.footer a {
		color: #252525;
		text-decoration: none;
	}
	/* div.footer .span-8 {
		margin-top: 15px;
	}
	div.footer {
		color: white;
	}
	div.footer h3 {
		padding: 0 15px 12px 15px;
		margin-bottom: 12px;
		font-weight: bold;
		background: #252525 url(img/sep-red.gif) repeat-x 0 bottom;
	}
	div.footer div ul, .blocks div ol {
		list-style-type: circle;
		list-style-position: inside;
		padding-bottom: 10px;
		margin-bottom: 15px;
	} */

/* ======== Widgets ======= */
#calendar_wrap {
	padding: 0;
	margin: 0;
	background: none;
}
	#wp-calendar  {
	}
		#wp-calendar caption {
			margin-bottom: 5px;
		}
		#wp-calendar thead {
			color: white;
		}
		#wp-calendar th {
			background-color: #252525;
		}
.widget_tag_cloud a {
	margin-right: 5px;
}
.widget_search .search {
	float: none;
	color: #252525;
}
	.widget_search div {
		background: none;
		padding: 15px;
	}
	.widget_search label {
		display: block;
	}
	.widget_search label.hidden, .widget_search div input#s, .widget_search div input#search {
		margin-right: 7px;
	}
	.widget_search .search #s, .widget_search .search #search {
		width: 170px;
	}

.alignnone {
	display: block;
}
.alignleft {
	float: left;
	margin-right: 15px;
}
.alignright {
	float: right;
	margin-left: 15px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	/* border: 1px solid #ddd; */
	text-align: center;
	background-color: #f3f3f3;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 4px 0 0 0;

	/* margin: 0 0 15px 0;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; **/
}
	.wp-caption a {
		line-height: 0.11em;
	}
	.wp-caption a:hover {
		background: none;
	}
	.wp-caption img {
		margin: 0 auto;
		display: block;
		padding: 0;
	}
	.wp-caption-text {
		padding: 3px 0 !important;
		margin: 0 !important;
	}
.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

div.com {
	margin-bottom: 30px;
}
.list-4 {
	list-style: none;
	margin: 0;
	padding: 0;
}
	.list-4 li {
		border: 1px solid #e9eaea;
		padding: 15px 15px 0 15px;
		margin: 0 0 15px 0;
	}
		* html .list-4 li {
			padding:0 40px 0 20px !important;
		}
		*:first-child+html .list-4 li {
			padding:0 40px 0 20px !important;
		}
		* html .list-4 img {
			margin:20px auto auto 0;
		}
		*:first-child+html .list-4 img {
			margin:20px auto auto 0;
		}
		* html .list-4 p img {
			margin:0 auto auto 0;
		}
		*:first-child+html .list-4 p img {
			margin:0px auto auto 0;
		}
	.com-header {
		padding-bottom: 15px;
		border-bottom: 1px solid #e9eaea;
		margin-bottom: 15px;
	}
		.com-header img {
			display: block;
			float: left;
		}
		.com-header .tp {
			display: block;
			margin: 0 0 0 63px;
			padding: 0;
			text-align: left;
		}
			.tp span, .tp span a {
				font-weight: bold;
				line-height: 150%;
			}
			.tp span {
				display: block;
				margin-bottom: 6px;
			}
		.reply input {
			margin-right: 15px;
		}
	.com blockquote {
		margin: 0;
	}
		.com blockquote p {
			background-color: #e9eaea;
			padding: 0.5em 0.75em;
			margin-bottom: 10px;
		}
	.com code {
		margin: 0;
		padding: 0.75em 15px;
		display: block;
		color: #666666;
		font-family: monospace;
		font-size: 12px;
		border: 1px dashed #e9eaea;
		clear: both;
	}

    just write:

    .span-24{margin:0px auto 0px auto;}

    if i’m getting it right…

    Thread Starter giorgiomartini

    (@giorgiomartini)

    i jst wrote that at the very bottom of my css file.

    that aint working either.

    any other suggestions ?

    i forgot you need to add also a width parameter for it to work:
    .span-24{width:940px; margin:0px auto 0px auto;}

    and maybe also delete those <center> tags, you don’t need them!

    Thread Starter giorgiomartini

    (@giorgiomartini)

    thanx bentalgad ,

    so i deleted those center tags , and copied that code to the very bottom of the css file , but it still aint working.

    so this is how my last lines of my css file look ( is just like the above code but with the new code)

    .com code {
		margin: 0;
		padding: 0.75em 15px;
		display: block;
		color: #666666;
		font-family: monospace;
		font-size: 12px;
		border: 1px dashed #e9eaea;
		clear: both;
	}

.span-24{width:940px; margin:0px auto 0px auto;

    Get rid the the span-24 in <div class="span-24 header">. You don’t need it and it’s making things far more difficult that they should be. Change it to:

    <div id="header">
 <img src="https://www.tweakingknobs.com/wp-content/themes/fancy/img/tweakingknobs.jpg">
</div>

    Then add:

    #header {
padding:30px 17px 20px;
text-align:center;
}

    You also need to sort out the validation errors in your CSS.

    Thread Starter giorgiomartini

    (@giorgiomartini)

    thanx, but

    where should i add the second code? because if i put it at the bottom of the css file it doesnt work , and if i put it at the end of the header it shows up like normal text , just like it is right now if u look at my web.

    thanx.

    At the bottom of your CSS file. But sort out your CSS validation errors first. They could stop some of the CSS working in some browsers.

    Thread Starter giorgiomartini

    (@giorgiomartini)

    thanx !

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to center my” Top” image in my page?’ is closed to new replies.