WordPress.org

Ready to get started?Download WordPress

Forums

TinyMCE - images don't align left (6 posts)

  1. RipRapRob
    Member
    Posted 6 years ago #

    When I insert an image, and tries to left-align it, it really doesn’t work.

    In the HTML I can se an class=”alignleft size-thumbnail wp-image-209″ or something similar, but no alignment of the image.

    When I manually add “align=”left”" to the image tag, in HTML-mode, everything works like it should (naturally).

    Is this a bug, or just something I’m missing in regards to the CSS class thingy?

    Thanks :o)

  2. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    In XHTML, "align" is not a valid attribute, it's been deprecated. The new "alignleft", "aligncenter", and "alignright" classes are used instead. In your CSS file for your theme, you can style each of those appropriately and then the code will work.

    There is an example at the bottom of this post:
    http://wordpress.org/support/topic/164999

  3. bluebird2
    Member
    Posted 5 years ago #

    I have the same problem in my website. I tried to use "alignleft" and it didn't work. The code is generated by TinyMCE, and it looks fine there but on the website it does not. I tried to use "Class" from my CSS but that didn't work either. It puts the border around the image according to the Class specifications but it does not align it.

    What can be the reason?

  4. bluebird2
    Member
    Posted 5 years ago #

    Thanks for the link. It worked for me. These codes work:

    img.centered, .aligncenter, div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}

    and

    .wp-caption {
    	border: 1px solid #ddd;
    	text-align: center;
    	background-color: #f3f3f3;
    	padding-top: 4px;
    	margin: 10px;
    	-moz-border-radius: 3px;
    	-khtml-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    .wp-caption img {
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
    	font-size: 11px;
    	line-height: 17px;
    	padding: 0 4px 5px;
    	margin: 0;
    }

    Place them in your CSS.

  5. m0ppe
    Member
    Posted 5 years ago #

    For some reason when i add the previously mentioned code to my css, and i got an image that takes up more space than the actual text, the image will not keep the boundaries but appears to be floating over the part of the page that follows it.

    If i remove the code, the image will not align left (i've only tested left), but it doesn't float over the stuff that comes after.

    Any help would be greatly appreciated.

  6. m0ppe
    Member
    Posted 5 years ago #

    My problem was solved by putting a
    clear: both;
    on the div that followed the picture.

Topic Closed

This topic has been closed to new replies.

About this Topic