Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: not2easy

Message Too Old, No Replies

CSS postions picture

     
8:33 am on Oct 20, 2016 (gmt 0)

New User

joined:Oct 20, 2016
posts: 1
votes: 0


I have a problem with CSS. Please for assistance. Yelim to me the picture is positioned at the center of the page and not the left or the right. I want to be on cebtru regardless of screen resolution. This is the code in CSS

/ * Product * /
.product-info {overflow: auto; margin-bottom: 20px; }
.product-info> .right {float: left; }
.product-info> + .left .right {margin-left: 255px; }
.product-info> .right {position: relative}
.product info h1 {margin-bottom: 0px; background: none;}
.product info .image {box-shadow: 0px 0px 3px # CCC 0px 0px 0px 1px white inset; background: # F6EEF2; float: left; margin: 5px 0px 5px 1px; padding: 2px 2px 2px 2px; text-align: center; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out;}
.product info .image_inside {}
.product-info # zoom-image {text-align: center; display: block; margin: 10px 0 0; font-size: 10px; text-transform: uppercase; color: # 333;}
.icon-zoomin {text-decoration: none! important; height: 14px; width: 14px; background: transparent url ( '../ image / zoom-icon.png') no-repeat; display: inline-block; vertical-align: text-top}
.product-info-.image additional {width: 285px; clear: both; overflow: hidden; }
.product-info-.image additional a: hover {}
.product info .image additional-a {float: left; display: block; margin: 10px 10px 2px 2px; padding: 0px; display: block; -webkit-transition: all 0.3s ease-and-out; -moz-transition: all 0.3s ease-and-out; -o-transition: all 0.3s ease-and-out; -ms-transition: all 0.3s ease-and-out; transition: all 0.3s ease-and-out; box-shadow: 0px 0px 3px # CCC, 1px 1px 1px white inset; background: # f8f8f8; }

Thanks

[edited by: not2easy at 5:39 pm (utc) on Oct 20, 2016]
[edit reason] compliance [/edit]

5:46 pm on Oct 20, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4397
votes: 314


Hello ivan448 and welcome to the forums. I needed to remove the link to the source page for this problem, we try to provide answers that can help anyone with the same type of issue. If you can post the section of html where this image centering problem is seen we can look for the solution.
6:01 pm on Oct 20, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 794


Typically if want something centered you set your left and right margins to auto.
6:50 pm on Oct 20, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4397
votes: 314


Agreed NickMNS, that centers without regard to widths, so long as the container parent or class is not controlling alignment of the content.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members