Forums

WordPress › Support » How-To and Troubleshooting

[resolved] Image won't align center (18 posts)

  1. burukutuk
    Member
    Posted 3 months ago #

    Please help, my image can't align center. Even if in the post mode it's centered, but once it's published, it's aligned left again. I only can center it using code <center></center> manually, but it's really tiring and time consuming. Any help will appreciated. This is the CSS code:

    /*
Theme Name: Turtle Gallery
Theme URI: http://www.wallpaperscars.info/
Description: Turtle Gallery wordpress themes are suitable for wallpaper site, photo gallery, a collection of photos and blogs that contain pictures. With features such as adsense ready, share button, facebook like, google plus, social media and fast-loading makes this very interesting themes.
Version: 1.0
Author: Mas David
Tags : blue,fast-loading,adsense ready, ooND Cakep :D
*/
#wrap{background:#FFF;width:900px;border:1px solid #CCC;margin:10px auto;padding:0 10px 10px}
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:.8em;color:#222;background:#f6f6f6;width:930px;margin:0 auto;padding:0}
a{text-decoration:none}
p{text-decoration:none;line-height:20px}
#topheader{background-color:#E9E6E1;border-bottom-color:#06c;border-bottom-style:solid;border-bottom-width:4px;border-left-color-ltr-source:physical;border-left-color-rtl-source:physical;border-left-color-value:#06c;border-left-style-ltr-source:physical;border-left-style-rtl-source:physical;border-left-style-value:none;border-left-width-ltr-source:physical;border-left-width-rtl-source:physical;border-left-width-value:0;border-right-color-ltr-source:physical;border-right-color-rtl-source:physical;border-right-color-value:#06c;border-right-style-ltr-source:physical;border-right-style-rtl-source:physical;border-right-style-value:none;border-right-width-ltr-source:physical;border-right-width-rtl-source:physical;border-right-width-value:0;border-top-color:#06c;border-top-style:none;border-top-width:0;color:#06c;font-size:12px;height:22px;margin-top:10px;padding-top:5px;width:auto}
#date{float:left;padding-left:10px;width:50%}
#subscribe{float:right;padding-right:5px}
#subscribe a{color:#06c;text-decoration:none;padding-right:5px;padding-left:5px}
#header{width:900px;height:75px;background-color:#627AAD}
#title{float:left;text-align:left;text-indent:-5000px}
#title a{color:#06F;text-decoration:none}
#header h1{font-size:16px;font-style:normal;margin:0}
#header .logo{width:145px;height:200px;float:left}
#header .banner{width:728px;float:right;padding-right:25px;padding-left:0;height:90px;margin-top:109px;margin-bottom:0}
#main_topmenu{float:left;width:748px;font-size:14px;display:inline;margin-right:0;margin-bottom:0}
#homelink{padding-left:22px!important}
#dropmenu{float:left;list-style:none;position:relative;line-height:22px;z-index:300;width:740px;padding-top:0;padding-right:0;padding-left:0;background-color:#3f80cf;margin:0 0 10px}
#dropmenu ul{list-style:none;line-height:20px;z-index:300;position:absolute;display:none;top:28px;left:-1px;background-color:#3f80cf;margin:0;padding:0}
#dropmenu a{display:block;color:#FFF;text-decoration:none;padding:3px 8px}
#dropmenu a:hover{color:#000;background-color:#CCC}
#dropmenu li{float:left;position:relative;display:block}
#dropmenu li ul{width:210px}
#dropmenu li ul a{width:195px;height:auto;float:left}
#dropmenu .page_item{background:#FFF}
#dropmenu .page_item .page_item{font-size:11px;border:none}
#dropmenu .page_item li ul a{width:auto}
#dropmenu ul ul{line-height:20px;top:auto}
#dropmenu li ul ul{left:12em;margin:0 0 0 10px}
#dropmenu li:hover ul,#dropmenu li li:hover ul,#dropmenu li li li:hover ul,#dropmenu li li li li:hover ul{display:block}
#search{background:#F7F7F7;border:1px solid #b3b3b3;float:right;height:25px;width:400px;margin:0 15px 0 0}
* html #search{margin-right:8px}
#search input{font-family:Verdana, Arial, Helvetica, sans-serif;background:transparent;border:0;color:#000;float:left;font-size:13px;width:288px;margin:4px 0 0;padding:0 2px 2px 10px}
#bigcontent{width:900px;margin-bottom:5px;background-color:#FFF}
#content{float:left;width:707px;border-right-width:1px;border-right-style:solid;border-right-color:#ccc;margin:0 0 5px;padding:10px 5px 10px 15px}
.entry{margin-bottom:2em}
.entrytitle{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ccc;text-align:center}
.entrytitle h2{font-size:18px;line-height:24px;margin:0 0 5px;padding:0}
.entrytitle h2 a{color:#3f80cf}
.entrytitle h2 a:hover{color:#039}
.entrytitle .meta{color:#111;font-size:12px;margin-bottom:8px;line-height:20px;padding:3px}
.entrytitle .meta a:hover{color:#222}
.entry a,.commentlist a,.navigation a{color:#06c}
.entry blockquote{color:#000;border-color:#666;border-style:solid;border-width:1px 1px 3px 3px;margin:0 30px 20px;padding:0 0 0 10px}
#sidebar{float:right;width:166px;height:100%;min-height:100%}
#sidebar .box{margin-bottom:10px;padding-bottom:6px;padding-left:3px}
#sidebar .box h3,#sidebar h3{font-size:12px;font-weight:700;font-family:arial;color:#fff;background-color:#06c;text-decoration:underline;margin:0;text-transform:uppercase;padding:2px 7px 1px 2px}
#sidebar a{color:#333}
#sidebar ul{list-style-type:none;margin:0 0 5px;padding:0}
#sidebar ul li{background-color:#E9E6E1;margin-bottom:0;border-bottom-width:0;border-bottom-style:solid;border-bottom-color:#ddd;text-decoration:underline;font-family:arial;padding:0 3px 3px 6px}
#sidebar ul li ul{list-style-type:square;margin-left:1.5em;border:0;padding:0}
#footer{background-color:#06c;width:885px;margin:5px 0 0;padding:8px}
#footer p{font-size:11px;color:#CCC;margin:0;padding:0}
#footer p a{color:#FFF}
#footer p a:hover{color:#fff}
#foot-left{float:left;font-size:12px;color:#FFF;text-align:left;height:70%}
#foot-left a{color:#FFF;padding-right:5px}
#footer .right{float:right;width:20%;text-align:right}
.commentsblock textarea{width:530px}
.commentsblock input,.commentsblock textarea{border:1px solid #d1d1d1;width:500px}
ol.commentlist{color:#222;list-style-type:none;margin:1.5em 0 0;padding:0}
.commentlist li{margin-bottom:4px;border:1px solid #CCC;padding:3px}
h3#comments{font-size:1.6em}
.commentcount{float:right;font-weight:700;font-size:16px}
.commentcount a{color:#ccc}
.commentcount a:hover{color:#999}
p img{max-width:100%;padding:0}
img.centered{display:block;margin-left:auto;margin-right:auto}
img.alignright{display:inline;margin:0 0 2px 7px;padding:4px}
img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px}
.alignleft{float:left}
.menu{border:0 solid #403f3f;background:transparent;overflow:hidden;width:773px;position:absolute;margin:-3px 0 0 140px;padding:0}
* html .menu{height:1%}
.menu ul{float:left;margin:0;padding:3px}
.menu li{display:inline;font-weight:700;float:left;background-color:transparent;padding:2px}
.menu li a{color:#fff;display:block;margin-right:2px;float:left;margin-top:3px;margin-left:3px;padding:7px 10px 8px}
.menu li a:hover{background:#06c;color:#fff;text-decoration:none}
#adsense-menu{width:880px;background:#06c;border-top:5px solid #06c;color:#fff;height:20px;margin:125px 0 8px;padding:4px 10px 5px}
.item1{width:164px;height:274px;float:left;border:1px solid #CCC;margin:3px}
.item1 h2 a{color:#1676ad;text-decoration:none}
.item1 h2 a:hover{color:#1676ad;text-decoration:underline}
.item2{width:164px;height:274px;float:left;border:1px solid #666;margin:3px}
.item2 h2 a{color:#de1c1c;text-decoration:none}
.item2 h2 a:hover{color:#de1c1c;text-decoration:underline}
.hometitle h2{text-align:center;font-size:12px;padding-top:5px}
.hometitle a:hover{color:#06c;text-decoration:underline;font-size:14px}
.hometitle a{color:#06c;text-decoration:underline;font-size:14px;font-weight:700}
.hometitle{margin-top:3px;text-align:center;width:165px;margin-bottom:3px}
.rate{text-align:center;font-size:11px;color:#06c;font-weight:700;margin:15px 0 0}
.views{text-align:center;font-size:15px;padding-left:0;color:#06c;text-decoration:underline;font-weight:700;margin-bottom:12px}
.pubdate{text-align:center;font-size:11px;padding-left:0;color:#06c;text-decoration:none}
.wp-pagenavi{padding-top:25px}
#phones{background-color:#fff;border-left:solid 4px #fff;border-right:solid 4px #fff;border-top:solid 4px #fff;border-bottom:solid 4px #fff}
#phones p{font-size:12px;background:#B9C9FE;border-bottom:solid 1px #fff;padding:4px 6px}
#phones table{background:#B9C9FE;border-top:solid 1px #F1F0E5;border-bottom:solid 1px #fff}
#phones th,#phones td{font:12px Arial;vertical-align:top;padding:1px 6px}
#phones th{width:70px;font-weight:700;text-transform:uppercase;color:#00198F;border-right:solid 1px #00198F}
#phones td{background:#fff;color:#000;border-bottom:solid 1px #EFF3FF}
#phones td.ttl{font-weight:700;background-color:#E8EDFF}
#adsfront{float:left;padding:1px 4px}
#adsarchive{float:right;padding:1px 23px 1px 4px}
#adscomment{float:right;padding:1px 6px 1px 1px}
.commentsblock{width:500px}
#adssing{margin-left:-20px}
.meta{text-align:center}
h1{margin:0}
.bookmark{border:1px solid #f0f0f0;background:#f5f5f5;height:95px;width:533px;margin:0;padding:10px}
.bookmark h4{color:#666;font:bold 19px/19px Arial, sans-serif;border-bottom:solid 1px #eee;margin:0;padding:0}
.book{float:left;border:1px solid #eee;background:#fff;margin:0 5px 0 0;padding:1px}
.bookas{float:left;border:1px solid #eee;background:#fff;margin:0 11px 0 0;padding:1px;padding-top:6px;padding-left:6px;width:73px;height:30px}
.booklast{float:left;border:1px solid #eee;background:#fff;margin:0;padding:1px}
#ratview{float:right;background-color:#E9E6E1;width:80px;height:62px;padding:30px 40px 25px 30px}
.navigation{clear:both}
img,#sidebar ul li ul li{border:0}
#subscribe a:hover,#foot-left a:hover{text-decoration:underline}
#dropmenu li:hover ul ul,#dropmenu li:hover ul ul ul,#dropmenu li:hover ul ul ul ul,.menu li ul,#phones caption{display:none}
.entrytitle .meta a,#sidebar a:hover{color:#06C}
.entry a:hover,.commentlist a:hover,.navigation a:hover,#phones td.nfo{color:#000}
.commentsblock textarea:focus,.commentsblock textarea:focus,.commentsblock input:focus{background:#eee;border:1px solid #a1a1a1}
.alignright,#logos{float:right}
.item1 h2,.item2 h2{font-size:.8em;text-align:left;padding-left:5px;margin:0 0 3px}
.item1 p,.item2 p{margin:2px 0 3px}
.item1 img,.item2 img{margin-left:0;padding:2px}

  2. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    Perhaps your theme does not have the standard alignment CSS code:

    http://codex.wordpress.org/Wrapping_Text_Around_Images

    You'd need to look in the CSS style.css file, and possibly add it if it's missing.

    Where did that theme come from?

    BTW, center tags are deprecated, so you should avoid using them.

  3. jgarcia439
    Member
    Posted 3 months ago #

    Do you use an image plugin , like for gallery etc ? try deactivating any image plugin and see if the image gets aligned as per choice.

  4. burukutuk
    Member
    Posted 3 months ago #

    @wpyogi:

    I buy it from someone. The standard aligment already there. I don't understand your meaning by center tags are deprecated. Please explain what should i erase and what should i add on CSS.

    @jgarcia439:

    No plugin like that installed.

  5. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    http://www.w3schools.com/tags/tag_center.asp

    You should not be using <center> tags anywhere, ever.

    See this re: centering block elements using CSS:

    http://www.w3schools.com/css/css_align.asp

    Specific to WP:

    http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages#Image_Alignment

  6. burukutuk
    Member
    Posted 3 months ago #

    @Wpyogi:

    The latest post not using <center></center> anymore but using the align center from wordpress but still its aligned to left. Please help.

  7. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    Where's the post and I'll look at it :).

  8. burukutuk
    Member
    Posted 3 months ago #

    @Wpyogi:

    Sir, it's already fixed. Thank you for your help.

  9. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    Sure, you're welcome. And BTW, not sir :)

  10. burukutuk
    Member
    Posted 3 months ago #

    Please help, its back to left aligned again sir.

  11. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    You'll need to post a link to your site for help with this problem.

  12. burukutuk
    Member
    Posted 3 months ago #

    Here sir:

    http://www.tattoosme.org/elephant-bali-tattoo.html

  13. WPyogi
    Volunteer Moderator
    Posted 3 months ago #

    That's an .html page??

  14. alchymyth
    The Sweeper & Moderator
    Posted 3 months ago #

    your problem should have been solved by applying the instructions from the link in the first reply by @WPYogi; http://codex.wordpress.org/Wrapping_Text_Around_Images

    your theme does not have the necessary styles to align images;

    add this to the bottom of style.css of your theme:

    img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

    then clear the browser cache - press 'ctrl f5' or 'reload' a few times ...

  15. burukutuk
    Member
    Posted 3 months ago #

    @Wpyogi:

    Yes, but its wordpress, i change the permalink to .html

    @alchymyth:

    Will give it a try, if this is not work either, i will post here again.

  16. burukutuk
    Member
    Posted 3 months ago #

    @alchymyth:

    Sir, you re the king of CSS! It's worked, thank you.

  17. alchymyth
    The Sweeper & Moderator
    Posted 3 months ago #

    the thanks go to @WPYogi who suggested the cause and fix in the first reply.

  18. burukutuk
    Member
    Posted 3 months ago #

    @WPYogi:

    Thank you too [Title moderated]. :D Your trick worked!

Reply

You must log in to post.

About this Topic

Tags