centering

问题 I was wondering if there was a more efficient way to center an image inside a floated div compared to mine. Right now I have it set up so the image is placed inside a p and I center the p. Seeing that extra p tag annoys me way too much :(. Is there anyway I can center the img by itself? Thanks! I listed what I have now down below. Edit: It needs to be vertical and horizontal! HTML <div class="filler"><p><img src="images/qualGraphic.png" width="578px" height="256.72px" alt="Quality"/></p></div

问题 I'm using a PHP script to automatically resize pictures proportionally so they fit a given height and width (ex: original picture is 200x100px, target box is 180x180px, resized image is 180x90px). It works fine but the usual CSS tricks used to center an image inside a div seem to require you knowing the dimensions in advance. The only workaround I've found is to define an outer div to display:table; and the div containing an image to display: table-cell;vertical-align: middle;text-align

问题 I want to center and stretch checkbox in UniformGrid 's cell. I've tried to do it in many ways: <UniformGrid> <CheckBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" /> <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" /> <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="True" /> <CheckBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True"

问题 I currently have a div with a fixed width of 900px. I'd like to add a child iframe with a fixed width of 950px, and I'd like it to be perfectly aligned to the center. How can that be done? Thanks. 回答1: .container { width:900px } iframe { margin-left:-25px; width:950px; } 回答2: You can place the child at 50%, then use a negative margin that is half the width of the child: .parent { position: relative; overflow: hidden; } .child { position: absolute; left: 50%; top: 0; margin-left: -475px; }

问题 I am trying to create this layout using only CSS: When title fits: When title doesn't fit: The btn on the right should be centered if it wraps. I tried this: .container { width: 100%; border: 1px solid grey; padding: 5px; } .block { padding: 5px; border: 1px solid orange; float: left; } .right-block { float: right; } <div class="container"> <div class="block">Logo</div> <div class="block">Title that is too long</div> <div class="block right-block">right-btn</div> <div style="clear: both"><

问题 I have a div width a with of 100% and hidden overflow holding a div with a width of 3000px. I want the 3000px div to be cut off evenly on the left and right. I would use background-position:center; however, it's more complicated than that. The 3000px div is holding 30 100px divs. I have tried using auto margins on the left and right of the 3000px div, but it did not work. Here is the css: .bgAnimHolder{ width:100%; height:500px; overflow:hidden; position:absolute; z-index:1; top:0px; } .row{

问题 Short and sweet: How can I tell Interface Builder to center a window on a user's screen? I've seen the positioning tool on the inspector, but eyeballing doesn't always land as squarely as I like. Is this something where I should switch over to Xcode and add something to the init or awakeFromNib methods? 回答1: You could use [window center] as answered by wahkiz, but that might not be exactly what you want. The documentation states that this will put the window centered horizontally, but

问题 Trying to horizontally center and crop (if necessary) a div inside of another div. It's possible to achieve this same effect with a background image, but in this case my content is not a single image. Fiddle: http://jsfiddle.net/7aMhY/1/ HTML: <div class="poster_container"> <div class="poster_row"> <div class="poster" style="width: 210px;">1</div> <div class="poster" style="width: 210px;">2</div> <div class="poster" style="width: 210px;">3</div> <div class="poster" style="width: 210px;">4<

问题 I have an image like this, with a rectangle at specific coordinates: (for illustratory purposes I put the coordinates of the rectangle and its size and center in there) Now I want to render some text with ImageMagick, so that it fits exactly within the rectangle . If it's a very short (narrow) string, the rectangle's height will be the limiting factor: On the other hand with a long (wide) string, the rectangle's width will determine the size: In either case, independent of how short or long

问题 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } .image { width: 20%; height: 100%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; } .navigation { width: 79%; height: 100%; float: right; text-align: right; box-sizing: border-box; border-style: solid; border-width: 1px; } ul { height: 100%; font-size: 0; box-sizing: border-box