vertical-alignment

问题 http://jsfiddle.net/fQv97/ HTML <div class="table-cell"> My text, should be align middle </div> CSS .table-cell { height: 200px; width: 200px; vertical-align: middle; background: #eee; display: table-cell; position: absolute; } Problem The text should be placed in the middle of my "table cell". Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not? It still knows my height and width because I set it in my CSS. Any clever

问题 I have a regular DataGrid from WPF 4.0 RTM, where I put data from a database. In order to make clean & light style of DataGrid I use a tall/high rows and by default DataGrid aligns row content in top vertical position, but I want to set a center vertical alignment. I already tried to use this property VerticalAlignment="Center" in DataGrid options, but it doesn't help me. Here is an example of XAML-code, describing my DataGrid without center vertical alignment: <DataGrid x:Name=

问题 I have code: <tr> <td align="center" style="height: 50px; text-align: center; vertical-align: middle" > <div class="hoverClass ui-widget-content ui-corner-all" style="text-align: center; vertical-align: middle;width:100%;height:100%"> <label style="text-align: center; vertical-align: middle" >Streetlight Repair</label> </div> </td> </tr> I want it to be a cell with a div containing a label. I want the div to take up the whole cell. and the label to be centered within the div. However the

问题 I need to make a program that displays a receipt for any company. So, the user should enter the company name, date, time, name and price of four items purchased and the program should add the prices to arrive at the total and should display like the pic below. Here's what I have till now:- import javax.swing.*; public class Receipt { public static void main(String[] args) { String companyName; String itemName1; String itemName2; String itemName3; String itemName4; double item1; double item2;

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . I've been using relatively positioned elements to center things vertically for a while. I never understood, though, why position: relative; top: 50%; doesn't vertically center the element, or at least center the top edge of the element in it's container div. position: relative according to MDN: lays out all

问题 I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below: As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel. If I allow the div to set its own height, I get this: So my images are no longer lined up

问题 I know there are a ton of posts about this issue. After reading all them I feel like I am close, but it still isn't working for me. HTML: <div class="product"> <div class="image"> <a href="#"> <img src="http://i.imgur.com/rthFtAb.jpg" /> </a> </div> </div> CSS .product { height:225px; min-height:225px; max-width:220px; background-color:#ff00ff; } .image { min-height:225px; display:table-cell; vertical-align:middle; } .image img { max-width:100%; } http://jsfiddle.net/SBqU5/ What am I doing

问题 In a Bootstrap carousel item, I have a row of images nested in Bootstrap columns. Their height varies according to the width of columns. In the same row, there are also carousel controls LEFT and RIGHT for changing the items of the carousel. I need to have the controls left (<) and right (>) vertically centered to the row. How can this be acomplished? I tried to remove the row class and use the dislay: table and table-cell, which aligned controls vertically, but whole responsiveness was lost.

问题 I'm not sure if there is can be done with CSS, but wanted to confirm it here. This is the code snippet.. http://jsfiddle.net/2CHEb/ HTML: <div class="wraptocenter"><span></span> <img src="blah" /></div> <div class="description">Lorizzle ipsum dolor sit amizzle, tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget tortizzle. Sizzle </div> CSS: .wraptocenter { background: orange; float: left; height: 120px; margin:

问题 I'm building a flexible progress-bar with a number of constraints. It needs to be able to contain any number of items within it, have these items all be the same width, vertically centered, support content of varying lengths, work in IE9 and above and have an icon next to them without any additional markup. display: table-cell seemed to be the most appropriate solution for the potentially unlimited number of items inside as well as vertically aligning the text nicely, and :before would take