Questions tagged [vertical-alignment]

Typically a style or other UI definition associated with the placement of an interface item in the vertical plane.

3043 questions
166
votes
9 answers

How to vertically center content with variable height within a div?

What is the best way to vertically center the content of a div when the height of the content is variable. In my particular case, the height of the container div is fixed, but it would be great if there were a solution that would work in cases…
jessegavin
  • 67,411
  • 26
  • 135
  • 162
165
votes
13 answers

Add vertical whitespace using Twitter Bootstrap?

What's the best way to add vertical whitespace using Twitter's Bootstrap? For example, let's say that I am creating a landing page and would like a bit (100px) of blank whitespace above and below a certain button. Obviously, I could create a…
150
votes
4 answers

CSS vertical alignment of inline/inline-block elements

I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes. HTML:…
Yarin
  • 144,097
  • 139
  • 361
  • 489
149
votes
5 answers

vertical alignment of text element in SVG

Let's say I have the SVG file: b
semekh
  • 3,471
  • 2
  • 20
  • 33
145
votes
7 answers

Stacking Divs from Bottom to Top

When appending divs to a div with a fixed height, the child divs will appear from top to bottom, sticking at the top border. ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ …
Wulf
  • 3,738
  • 2
  • 19
  • 36
138
votes
10 answers

Vertically align an image inside a div with responsive height

I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio). HTML
user1794295
  • 1,699
  • 4
  • 16
  • 19
137
votes
2 answers

How to vertical align an inline-block in a line of text?

I want to create an inline-block that will take on some unknown width and height. (It'll have a table inside it with content dynamically generated). Further, the inline-block should be placed inside a line of text, such as "my text (BLOCK HERE)". …
Geoff
  • 9,096
  • 12
  • 46
  • 66
137
votes
11 answers

vertical align middle in

I want to keep the height of #abc div at 50px and text to align vertically in the middle of the div. body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; …
Outdated Computer Tech
  • 1,870
  • 4
  • 21
  • 38
121
votes
6 answers

UIButton custom font vertical alignment

I've got a UIButton which uses a custom font, which is set when my view loads: - (void)viewDidLoad { [super viewDidLoad]; self.searchButton.titleLabel.font = [UIFont fontWithName: @"FONTNAME" size: 15.0 ]; } The problem I've got is that…
Pete
  • 4,326
  • 9
  • 41
  • 75
115
votes
10 answers

Vertical (rotated) label in Android

I need 2 ways of showing vertical label in Android: Horizontal label turned 90 degrees counterclockwise (letters on the side) Horizontal label with letters one under the other (like a store sign) Do I need to develop custom widgets for both cases…
Bostone
  • 34,822
  • 38
  • 158
  • 216
114
votes
28 answers

Vertical Text Direction

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text? I…
Moon
  • 17,794
  • 55
  • 130
  • 193
110
votes
9 answers

trying to align html button at the center of the my page

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc.. I…
user1455116
  • 1,834
  • 4
  • 17
  • 42
109
votes
9 answers

CSS vertical alignment text inside li

I am displaying number of boxes in a row with fix height and width, generated from
  • tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something??? I am not looking for tricks…
  • AK4668
    • 1,696
    • 3
    • 14
    • 18
    104
    votes
    6 answers

    How to vertically align into the center of the content of a div with defined width/height?

    What would be the correct method to vertically center any content in a defined width/height div. In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works…
    Ricardo Rodrigues
    • 2,323
    • 5
    • 25
    • 31
    94
    votes
    8 answers

    How to vertically align 2 different sizes of text?

    I know to vertically align text to the middle of a block, you set the line-height to the same height of the block. However, if I have a sentence with a word in the middle, that is 2em. If the entire sentence has a line-height the same as the…
    JD Isaacks
    • 51,154
    • 89
    • 267
    • 413