Vertical-Align vertical-align is used to align inline-level elements. These are elements, whose display property evaluates to: inline inline-block inline-table (not considered in this answer) Inline-level elements are laid out next to each other in lines. Once there are more elements than fit into the current line, a new line is created beneath it. All these … Read more
The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements. So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/ .frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you … Read more
If you have a fixed height in your container, you can set line-height to be the same as height, and it will center vertically. Then just add text-align to center horizontally. Here’s an example: http://jsfiddle.net/Cthulhu/QHEnL/1/ EDIT Your code should look like this: .img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: … Read more
A Textblock itself can’t do vertical alignment The best way to do this that I’ve found is to put the textblock inside a border, so the border does the alignment for you. <Border BorderBrush=”{x:Null}” Height=”50″> <TextBlock TextWrapping=”Wrap” Text=”Some Text” VerticalAlignment=”Center”/> </Border> Note: This is functionally equivalent to using a grid, it just depends how you … Read more
Since you’re working with a row-direction flex container, pinning the last item to the bottom is not possible. You’re dealing with cross axis space distribution, which means flex lines are either stretched or packed, and there’s no way to pin two items to the top and one to the bottom (unless you go beyond flexbox … Read more
Complete solution of this issue at MSDN: Vertical alignment of DataGrid row content. In brief, in style-file set: <!–body content datagrid cell vertical centering–> <Style x:Key=”Body_Content_DataGrid_Centering” TargetType=”{x:Type DataGridCell}”> <Setter Property=”Template”> <Setter.Value> <ControlTemplate TargetType=”{x:Type DataGridCell}”> <Grid Background=”{TemplateBinding Background}”> <ContentPresenter VerticalAlignment=”Center” /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> In window file: <DataGrid x:Name=”ContentDataGrid” Style=”{StaticResource ContentDataGrid}” CellStyle=”{StaticResource Body_Content_DataGrid_Centering}” ItemsSource=”{Binding}” … Read more
Was looking at this problem recently, and tried: HTML: <body> <div id=”my-div”></div> </body> CSS: #my-div { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; background: red; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } Here’s the Fiddle: http://jsfiddle.net/sTcp9/6/ It even works when using “width/height: auto”, in the place … Read more
Flex Solution It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support. .wrap { height: 200px; width: 200px; border: 1px solid #aaa; margin: 10px; display: … Read more
div { display: table-cell; vertical-align: middle; height: 50px; border: 1px solid red; } <div> <label for=”name”>Name:</label> <input type=”text” id=’name’ /> </div> The advantages of this method is that you can change the height of the div, change the height of the text field and change the font size and everything will always stay in the … Read more
The other answers didn’t work for multiple lines. Therefore I initially continued using the undocumented cFlags.vCentered property, but that caused my app to be rejected from the app store. I ended up using a modified version of Matt Bell’s solution that works for multiple lines, word wrapping, and a truncated last line: -(void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView … Read more