Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Horizontally Centering an image

Posted on 2012-04-03
1
Medium Priority
?
168 Views
Last Modified: 2012-04-03
Hello Experts,

Example

I want to horizontally center the red image within the yellow rectangle.
Is it possible to do this just by editing the basket-title class?

Thanks
0
Comment
Question by:jagku
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37802539
Yes, but you would need to have margin:15px auto;.  To center a block level element like that, you need to have your left and right margins be auto and a fixed width also.

Make sense?  But since you have things overriding the margin-left & margin-right declarations in the basket-title class, you would need to add !important to the CSS.

Like so:

.basket-title {
    background: url("myimage.png") no-repeat scroll 0 0 transparent;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 50%;
}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

598 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question