WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Images wont align center (Theme: Arthemia) (15 posts)

  1. futurepocket
    Member
    Posted 3 years ago #

    Hi,
    The images on my website won't align center:

    http://futurepocket.com/headline/the-struggles-of-the-stanley-cup-champions/

    As you can see, the image on the bottom is meant to be centered, but it's not, and no matter what HTML coding I use, it will NOT center the images.

    Here is my styles.css:

    <iframe src="http://pastebin.com/embed_iframe.php?i=fKZ0rMFk" style="border:none;width:100%"></iframe>

    What needs to be edited to fix this issue?

  2. futurepocket
    Member
    Posted 3 years ago #

    Sorry, here is my styles.css:

    /*  
    
    Theme Name: Arthemia
    
    Theme URI: http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/
    
    Description: <a href="http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/">Arthemia</a> theme is combining a magazine and a weblog into one; it is not too magazine-ish nor too blog-ish. Designed for WordPress. Gravatar support included along with automatic thumbnail resizer.
    
    Version: 1.0
    
    Author: Michael Jubel Hutagalung
    
    Author URI: http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/
    
    The CSS, XHTML and design is released under GPL:
    
    http://www.opensource.org/licenses/gpl-license.php
    
    */
    
    /* HTML Elements */
    
    * {
    
    	margin:0;
    
    	padding:0;
    
    	}
    
    body {
    
    	font: 100% Arial, Helvetica;
    
    	background: #2c2c2c;
    
    	color: #000;
    
    	}
    
    p {	
    
    	margin: 15px 0;
    
    	}
    
    a:link, a:visited {
    
    	color: #3c78a7;
    
    	text-decoration:none
    
    	}
    
    a:hover, a:active {
    
    	color: #3c78a7;
    
    	text-decoration:underline;
    
    	}
    
    a img {
    
    	border:0;
    
    	}
    
    code {
    
    	font: 1.0em 'Courier New', Courier, Fixed;
    
    	background:#ececec;
    
    	}	
    
    acronym, abbr, span.caps {	
    
    	font-size: 0.9em;
    
    	letter-spacing: .07em;
    
    	cursor: help;
    
    	}			
    
    acronym, abbr {
    
    	border-bottom: 1px dashed #999;
    
    	}
    
    blockquote {
    
    	padding: 10px 10px 0 10px;
    
    	border-top: 1px solid #ddd;
    
    	border-bottom: 1px solid #ddd;
    
    	background: #eee;
    
    	font:1.0em Arial;
    
    	line-height:1.5em;
    
    	margin:10px 0px;
    
    	}
    
    select {
    
    	width: 130px;
    
    	}	
    
    /* Structure */
    
    #head {
    
    	width:960px;
    
    	margin:0px auto;
    
    	margin-top:15px;
    
    	padding:0px;
    
    	font-size:0.7em;
    
    	}
    
    #page {
    
    	width:940px;
    
    	margin:0px auto;
    
    	padding:10px;
    
    	background:#ececec;
    
    	font-size:0.7em;
    
    	}
    
    .left, .alignleft {
    
    	float:left;
    
    	}
    
    .right, .alignright {
    
    	float:right;
    
    	}
    
    /* Navigation Bar*/
    
    #navbar {
    
    	margin:0 auto;
    
    	margin-top:15px;
    
    	padding:0px 10px;
    
    	text-transform:uppercase;
    
    	background:#2c2c2c url(images/navbar.png);
    
    	}
    
    #page-bar {
    
    	width:722px;
    
    	}
    
    #page-bar ul {
    
    	list-style: none;
    
    	}
    
    #page-bar li {
    
    	float:left;
    
    	list-style:none;
    
    	cursor: pointer;
    
    	display:block;
    
    	border-right:1px solid #333;
    
    	}
    
    #page-bar li:hover {
    
    	background: #3c78a7;
    
    	}
    
    #page-bar a, #page-bar a:visited {
    
    	margin: 0px;
    
    	padding:10px 16px;
    
    	font-weight:bold;
    
    	color:#FFF;
    
    	display:block;
    
    	}
    
    #page-bar a:hover {
    
    	text-decoration:none;
    
    	display:block;
    
    	}
    
    #searchform {
    
    	width:194px;
    
    	float:right;
    
    	text-align:right;
    
    	padding-top:8px;
    
    	margin-right:10px;
    
    	}
    
    /* Dropdown Menus */		
    
    #page-bar li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	}
    
    #page-bar li li {
    
    	float: left;
    
    	margin: 0px;
    
    	padding: 0px;
    
    	width: 122px;
    
    	text-transform:none;
    
    	}
    
    #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    
    	background: #2B2B2B;
    
    	width: 122px;
    
    	float: none;
    
    	margin: 0px;
    
    	padding: 5px 10px 5px 18px;
    
    	border-top: 1px solid #C0C0C0;
    
    	}
    
    #page-bar li li a:hover, #page-bar li li a:active {
    
    	background: #666666;
    
    	padding: 5px 10px 5px 18px;
    
    	}
    
    #page-bar li ul {
    
    	position: absolute;
    
    	width: 10em;
    
    	left: -999em;
    
    	}
    
    #page-bar li:hover ul {
    
    	left: auto;
    
    	display: block;
    
    	}
    
    #page-bar li:hover ul, #page-bar li.sfhover ul {
    
    	left: auto;
    
    	}
    
    /* Text*/
    
    h1 {
    
    	font:3.5em Arial;
    
    	font-weight:bold;
    
    	letter-spacing:-0.08em;
    
    	}
    
    h2 {
    
    	font:2.3em Georgia, "Times New Roman";
    
    	}
    
    h3 {
    
    	font:1.3em Arial;
    
    	margin-bottom:3px;
    
    	color:#3c78a7;
    
    	font-weight:bold;
    
    	}
    
    h4 {
    
    	font:1.0em Arial;
    
    	}
    
    h3.cat_title, h3.cat_title a {
    
    	color:#333;
    
    	letter-spacing:-0.05em;
    
    	font-size:0.85em;
    
    	}
    
    h3#respond {
    
    	margin-top:0px;
    
    	padding-top:20px;
    
    	}
    
    h3#comments {
    
    	margin-top:32px;
    
    	padding-left:0px;
    
    	}
    
    h3.authors {
    
    	margin-top:15px;
    
    	}
    
    /* Index Page*/
    
    #logo {
    
    	width:350px;
    
    	}
    
    #tagline {
    
    	margin-top:5px;
    
    	font-size:1em;
    
    	color:#333;
    
    	}
    
    #top {
    
    	padding:0;
    
    	}
    
    #headline {
    
    	width:590px;
    
    	float:left;
    
    	background:#fff;
    
    	padding:10px;
    
    	font-size:1.05em;
    
    	line-height:1.5em;
    
    	margin:0;
    
    	}
    
    #headline  div.title {
    
    	font-weight:bold;
    
    	font:2.4em Georgia;
    
    	letter-spacing:-0.05em;
    
    	display:block;
    
    	padding-bottom:5px;
    
    	}
    
    #headline div.meta {
    
    	display:block;
    
    	margin-top:-5px;
    
    	padding-bottom:2px;
    
    	}
    
    #headline p {
    
    	padding-bottom:15px;
    
    	}
    
    #featured {
    
    	width:300px;
    
    	background:#fff;
    
    	float:right;
    
    	padding:10px 10px 9px 10px;
    
    	}
    
    #featured .clearfloat {
    
    	margin-top:7px;
    
    	margin-bottom:8px;
    
    	}
    
    #featured .info {
    
    	margin-top:5px;
    
    	padding-top:5px;
    
    	float:right;
    
    	width:180px;
    
    	}
    
    #featured .title {
    
    	font-weight: bold;
    	font-size: 1.35em;
    
    	}
    
    #headline a img, #featured a img {
    
    	border:1px solid #ccc;
    
    	margin-top:5px;
    
    	margin-right:10px;
    
    	padding:2px;
    
    	}
    
    #middle {
    
    	width: 920px;
    
    	background:#fff;
    
    	float:right;
    
    	padding:10px;
    
    	margin:10px 0;
    
    	}
    
    .category {
    
    	width:164px;
    
    	float:left;
    
    	border-top:8px solid #333;
    
    	margin:0px;
    
    	padding:5px 10px 10px 10px;
    
    	background:#fff;
    
    	}
    
    .category p {
    
    	margin:0;
    
    	}
    
    #cat-1, #cat-3, #cat-5  {border-top:8px solid #333333;}
    
    #cat-2, #cat-4 {border-top:8px solid #3c78a7;}
    
    .category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
    
    	text-transform:lowercase;
    
    	margin:0;
    
    	font-weight:bold;
    
    	font-size:1.5em;
    
    	letter-spacing:-0.05em;
    
    	}
    
    #front-popular h3 {
    
    	color:#fff;
    
    	}
    
    .category a {
    
    	color:#333;
    
    	display:block;
    
    	background:none;
    
    	}
    
    .category a:hover {
    
    	background:none;
    
    	color:#fff;
    
    	text-decoration:none;
    
    	}
    
    #cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }
    
    #cat-2:hover, #cat-4:hover {background:#3c78a7; color:#fff; }
    
    #cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }
    
    #cat-2:hover a, #cat-4:hover a {background:#3c78a7; color:#fff; }
    
    #bottom {
    
    	width: 940px;
    
    	}
    
    #front-list {
    
    	width:590px;
    
    	background:#fff;
    
    	padding:10px;
    
    	font-size:1.05em;
    
    	line-height:1.75em;
    
    	float:left;
    
    	}
    
    #archive {
    
    	padding-top:15px;
    
    	font-size:1.05em;
    
    	line-height:1.75em;
    
    	}
    
    #front-list blockquote {
    
    	padding: 0px 10px 0 10px;
    
    	}
    
    #front-list .title, #archive .title {
    
    	font-weight:bold;
    
    	font:2.0em Georgia;
    
    	letter-spacing:-0.05em;
    
    	}
    
    #front-list .clearfloat, #archive .clearfloat {
    
    	padding-bottom:10px;
    
    	border-bottom:1px dotted #ccc;
    
    	margin-bottom:10px;
    
    	}
    
    #front-list .spoiler, #archive .spoiler {
    
    	display:block;
    
    	margin-top:3px;
    
    	}
    
    #front-list p, #archive p {
    
    	margin:0px;
    
    	padding:0px;
    
    	}
    
    .author {
    
    	font-size:0.8em;
    
    	font-weight:bold;
    
    	}
    
    .meta {
    
    	font-size:0.8em;
    
    	color:#333;
    
    	}
    
    .meta a {
    
    	color:#333;
    
    	}
    
    #headline p, #featured p {
    
    	margin:0;
    
    	}
    
    /* Content Page*/
    
    #content {
    
    	width:590px;
    
    	background:#fff;
    
    	padding:10px;
    
    	font-size:1.05em;
    
    	line-height:1.75em;
    
    	float:left;
    
    	min-height:400px;
    
    	}
    
    #content .breadcrumbs, #content .breadcrumbs a {
    
    	font-weight:bold;
    
    	color:#333;
    
    	}
    
    #content h2.title {
    
    	font:2.2em Georgia;
    
    	font-weight:bold;
    
    	letter-spacing:-0.05em;
    
    	border-bottom:1px solid #ddd;
    
    	border-top:3px solid #ddd;
    
    	padding:5px 0px;
    
    	}
    
    .post {
    
    	font-size:1.05em;
    
    	line-height:1.75em;
    
    	}
    
    .post p {
    
    	margin-top:10px;
    
    	}
    
    .post .clearfloat {
    
    	border-bottom:1px dotted #ccc;
    
    	margin:10px 0px;
    
    	}
    
    .post ul, .post ol, #front-list ul, #front-list ol {
    
    	margin-bottom:15px;
    
    	}
    
    .post ul li, #front-list ul li {	
    
    	list-style:square;
    
    	margin-left:30px;
    
    	}
    
    .post ol li, #front-list ol li {	
    
    	list-style:decimal;
    
    	margin-left:30px;
    
    	}
    
    .post ol li ul li, #front-list ol li ul li {	
    
    	list-style:square;
    
    	margin-left:20px;
    
    	}
    
    .post img, .post a img, #front-list img, #archive img {
    
    	margin:0 10px 5px 0;
    
    	padding:2px;
    
    	}
    
    .post .ads {
    
    	margin-top:10px;
    
    	}
    
    .entry {
    
    	margin-top:20px;
    
    	}
    
    #stats {
    
    	margin-top:0px;
    
    	padding:4px 0px;
    
    	text-transform:uppercase;
    
    	font:0.8em Arial;
    
    	display:block;
    
    	}
    
    #stats span {
    
    	padding: 0px 20px 0px 0px;
    
    	}
    
    #stats span a:hover {
    
    	background:none;
    
    	}
    
    #stats span a {
    
    	color:#333;
    
    	}
    
    #stats img, #nav img {
    
    	border:0px;
    
    	margin:0px;
    
    	padding:0px;
    
    	}
    
    #tools {
    
    	width:590px;
    
    	height:25px;
    
    	font-size:0.95em;
    
    	}
    
    #tools a:hover {
    
    	background:none;
    
    	}
    
    .navigation {
    
    	padding:5px 0px;
    
    	text-align:Center;
    
    	}
    
    /* Sidebar*/
    
    #sidebar {
    
    	width:320px;
    
    	float:right;
    
    	margin:0px 0px 0px 0px;
    
    	}
    
    #sidebar h3 {
    
    	font:1.1em Arial;
    
    	font-weight:bold;
    
    	background:#333;
    
    	color:#fff;
    
    	margin:10px 0px 5px 0px;
    
    	padding:3px 10px;
    
    	}
    
    #sidebar-top, #sidebar-bottom {
    
    	width:300px;
    
    	float:right;
    
    	padding:0px 10px 10px 10px;
    
    	background:#fff;
    
    	}
    
    #sidebar-bottom, #sidebar-middle {
    
    	margin-top:10px;
    
    	}
    
    #sidebar-middle {
    
    	width:320px;
    
    	float:right;
    
    	}
    
    #sidebar-left {
    
    	width:135px;
    
    	padding:0px 10px 10px 10px;
    
    	float:left;
    
    	background:#fff;
    
    	}
    
    #sidebar-right {
    
    	width:135px;
    
    	padding:0px 10px 10px 10px;
    
    	float:right;
    
    	background:#fff;
    
    	}
    
    #sidebar li {
    
    	list-style:none;
    
    	border-bottom:1px dotted #ccc;
    
    	display:block;
    
    	padding:2px 0px 2px 13px;
    
    	background:url(images/sub.png) no-repeat 0 0px;
    
    	}
    
    #sidebar li ul li:last-child{
    
    	list-style:none;
    
    	border-bottom:0px dotted #ccc;
    
    	display:block;
    
    	padding:2px 0px 0px 13px;
    
    	background:url(images/sub.png) no-repeat 0 0px;
    
    	}
    
    #sidebar-ads {
    
    	width:300px;
    
    	float:right;
    
    	margin-bottom:10px;
    
    	padding:10px;
    
    	background:#fff;
    
    	}
    
    /* Form Elements */
    
    select {
    
    	border:1px solid #333;
    
    	width:100%
    
    	}
    
    .field {
    
    	padding: 2px;
    
    	border:1px solid #333;
    
    	background:#fff;
    
    	font-size:1.0em;
    
    	}
    
    #s {
    
    	padding:1px;
    
    	font-size:1.0em;
    
    	width:150px;
    
    	}
    
    #searchsubmit {
    
    	padding-left:5px;
    
    	}
    
    #commentform input {
    
    	width: 140px;
    
    	margin: 5px 5px 1px 0;
    
    	}
    
    #commentform textarea {
    
    	width: 99%;
    
    	margin-top:5px;
    
    	}
    
    /* Comments*/
    
    .commentlist cite {
    
    	font-style:normal;
    
    	margin-bottom:4px;
    
    	display:block;
    
    	}	
    
    .commentlist blockquote {
    
    	background:#ededed;
    
    	}
    
    .commentlist li {
    
    	padding: 10px 0px 10px 0px;
    
    	list-style:none;
    
    	margin-bottom:3px;
    
    	}
    
    .commentlist li li {
    
    	background:none;
    
    	border:none;
    
    	list-style:square;
    
    	margin:3px 0 3px 20px;
    
    	padding:3px 0;
    
    	}
    
    .commenttext {
    
    	padding: 10px 10px 0px 10px;
    
    	background:#f2f2f2;
    
    	border-top:1px solid #ddd;
    
    	border-bottom: 1px solid #ddd;
    
    	width:495px;
    
    	float:right
    
    	}
    
    .commentlist cite strong {
    
    	font-size:1.1em;
    
    	}
    
    li.my_comment {
    
    	background: #FFF;
    
    	border:none;
    
    	}
    
    li.my_comment cite strong {
    
    	font-size: 1.3em;
    
    	color:#313228;
    
    	}
    
    #commentform small {
    
    	background:#FFF;
    
    	font-weight:bold;
    
    	padding:0;
    
    	}
    
    .commentmetadata {
    
    	color:#4d4d4d;
    
    	display: block;
    
    	margin-top:3px;
    
    	text-align:right;
    
    	font-size:0.9em;
    
    	}
    
    .commentmetadata a, .commentmetadata a:visited {
    
    	color:#959382;
    
    	}
    
    .commentlist small {
    
    	background:#e9e9e9;
    
    	}
    
    .avatar {
    
    	border:1px solid #bbb;
    
    	margin:0px 10px 0px 0px;
    
    	float:left;
    
    	padding:2px;
    
    	width:55px;
    
    	height:55px;
    
    	}	
    
    #comment {
    
    	width:590px;
    
    	background:#fff;
    
    	}
    
    /* Footer*/
    
    #front-popular {
    
    	font-size:0.7em;
    
    	color:#fff;
    
    	width: 940px;
    
    	background:#2c2c2c url(images/bottombar.png) bottom no-repeat;
    
    	margin: 0 auto;
    
    	padding:10px;
    
    	}
    
    #recentpost, #mostcommented {
    
    	width:280px;
    
    	float:left;
    
    	padding:10px;
    
    	border:1px solid #fff;
    
    	}
    
    #mostcommented {
    
    	margin-left:17px;
    
    	}
    
    #recent_comments {
    
    	width:280px;
    
    	float:right;
    
    	padding:10px;
    
    	border:1px solid #fff;
    
    	}
    
    #recentpost a, #mostcommented a, #recent_comments a {
    
    	color:#fff;
    
    	}
    
    #recentpost ul, #mostcommented ul, #recent_comments ul {
    
    	margin-top:5px;
    
    	}
    
    #recentpost ul li, #mostcommented ul li, #recent_comments ul li {
    
    	list-style:none;
    
    	border-top:1px dotted #fff;
    
    	padding:5px;
    
    	display:block;
    
    	}
    
    #recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
    
    	background:#3c78a7;
    
    	color:#fff;
    
    	}
    
    #recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
    
    	border-top:0px dotted #fff;
    
    	}
    
    #footer {
    
    	margin: 0 auto;
    
    	width: 960px;
    
    	text-align: center;
    
    	font-size:0.6em;
    
    	padding-top:10px;
    
    	padding-bottom:10px;
    
    	}
    
    /* Float Properties*/
    
    .clearfloat:after {
    
    	content:".";
    
    	display:block;
    
    	height:0;
    
    	clear:both;
    
    	visibility:hidden;
    
    	}
    
    .clearfloat {
    
    	display: inline-block;
    
    	}
    
    /* Hides from IE-mac \*/
    
    * html .clearfloat {
    
    	height:1%;
    
    	}
    
    *+html .clearfloat {
    
    	height:1%;
    
    	}
    
    .clearfloat {
    
    	display:block;
    
    	}
    
    .wp-caption-text {
    
    	text-align:center;
    
    	}
  3. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    It's because your image is "alignright" which is float: right; and I don't see the CSS for aligncenter. Add this:

    img.aligncenter {
        display: block;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .aligncenter {
    	float: none;
    }

    After this go to your dashboard and change to center instead of alignright like you have on http://futurepocket.com/headline/the-struggles-of-the-stanley-cup-champions/

  4. futurepocket
    Member
    Posted 3 years ago #

    The image at the bottom is set to aligncenter, but it won't align it, even after I added the code you provided in my CSS file.

  5. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

  6. futurepocket
    Member
    Posted 3 years ago #

    I added it, tested it, but it didn't fix it, and removed it. I will add it again, check now please :)!

  7. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    I'm not sure, but this should work just fine. You can try adding this directly into:

    .aligncenter {
        display: block;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    I am using the same code on many themes and it always works great.

  8. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    You have style="width: 310px;" being added to your images and I am not sure why. Here is an example for working site using the same thing:

    http://i.imgur.com/ACvQL.jpg

  9. futurepocket
    Member
    Posted 3 years ago #

    Lol, I appreciate your help, but it didn't fix the align issue and I know its a problem with the theme. Anything else?

  10. futurepocket
    Member
    Posted 3 years ago #

    Actually, that fixed it. Thanks :)!

  11. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    I was just about to say the same, so this topic is officially resolved? Praise the Lord LOL just kidding. All right, let's close this down and move to the other one shall we?

  12. futurepocket
    Member
    Posted 3 years ago #

    Officially unresolved lol... it only fixed that image for some reason... if you go to:

    http://futurepocket.com/technology/wind-mobile-review/

    You can see that image is still not centered for some reason!

  13. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    So let's officially resolve this:

    .aligncenter {
    display: block;
    margin-bottom: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    Add just like that with "!important;" after and we're done ;)

    Result:
    http://i.imgur.com/0ntmC.jpg

  14. futurepocket
    Member
    Posted 3 years ago #

    Fixed :) Thanks!!!

  15. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Anytime :)

Topic Closed

This topic has been closed to new replies.

About this Topic