centering

I'd like to resize a circle on my canvas with the help of a slider. This circle can be moved around on the canvas by some drag&drop stuff I did in code behind, so its position is not fixed. I have bound the slider's value to an ellipse's height and width. Unfortunately, when I use the slider, the circle gets resized with its top left point (actually the top left point of the rectangle it's sitting in) staying the same during the operation. I would like to resize it with its center point being constant during the operation. Is there an easy way to do this in XAML? BTW, I already tried

I have an image inside a div like this <div><img /><div> The image is dynamic of no fixed size. The div is of size 200px by 200px . The image size is not known beforehand. If the size of the image is greater than 190px by 190px , set it to 190px by 190px (that is, max-width:190px , max-height:190px ). How can I center the image with these needs satisfied? I need a solution working in Internet Explorer 7 too. The solution here and here can not be applied to my problem because It is not certain that the image would be less than 200 pixels. I want horizontal alignment too. No Internet Explorer 7

I am having major trouble getting the simplest of codes to work. I want my css horizontal list to be centered, that's all. Link here: http://bit.ly/LtIBai I have this code: #megaMenu.megaMenuHorizontal ul.megaMenu { text-align: center; } #megaMenu.megaMenuHorizontal ul.megaMenu > li { display: inline; } Yet it will not center? NOTE: The window must be at "tablet portrait" size to see the code I'm referring to. Approximately 800px wide, when the logo is centered and the menu falls to the next line, but before the mobile menu appears. The reason they refuse to center is because they are also

How to center the center circle (CSS only)? [Assume latest CSS3 browser support.] Must maintain v/h centering when parent w/h changes dynamically. Would the experimental CSS Box Model spec help here? Thanks. http://jsfiddle.net/dragontheory/VdJFa/5/ <div class="parent"> <div class="middle"> <div class="circle"> <div class="circle"></div> </div> </div> </div> .parent {display: table; margin: 50px auto; background: lightgray; height: 100px; width: 100px;} .middle {display: table-cell; vertical-align: middle;} .circle {margin: auto; border: solid 10px blue; border-radius: 50%; opacity: 0.3; width

I'm trying to center the body element on my HTML page. Basically, in the CSS I set the body element to be display: inline-block; so that it is only as wide as its contents. That works fine. However, margin: 0px auto; doesn't center it on the page. Does anyone know how to fix this? I want the big blue square to be centered on the page, not floating to the left like it is now. Here's my CSS: body { display: inline-block; margin: 0px auto; text-align: center; } Also apply text-align: center; on the html element like so: html { text-align: center; } A better approach though is to have an inner

Before someone asks me why the hell I would want to do this let me come straight out and tell you. That way one of you clever peeps out there can tell me a far better way... I'm making a viewer for paintings which should stretch to fill the page, well 90% of the height of the screen to be precise. I want to fade the paintings in one over the other and want to center each of them in the middle of the screen. To fade the paintings in over each other I need to position them 'absolute' to stop them from stacking. Here's where the trouble comes. Ever since I've set them to absolute, every method I