Typically a style or other UI definition associated with the placement of an interface item in the vertical plane.
Questions tagged [vertical-alignment]
3043 questions
34
votes
10 answers
How to vertically align Bootstrap v4 modal dialogs
Vertically center modal dialogues in Bootstrap 4.
Note: The requirements below have been added to make it clear I am looking for a proper way to vertically center a Bootstrap modal, covering all possible cases, on all possible devices, in all…
tao
- 59,850
- 12
- 84
- 110
33
votes
2 answers
How to vertically center the contents of a flexbox item
I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does?
.flex-container {
display:flex;
…
emersonthis
- 30,934
- 52
- 191
- 328
31
votes
2 answers
Vertically centering text within an inline-block
I'm trying to create some buttons for a website using styled hyperlinks. I have managed to get the button looking how I want, bar one slight issue. I can't get the text ('Link' in the source code below) to vertically center.
Unfortunately there may…
Josh Bowe
- 313
- 1
- 3
- 4
31
votes
3 answers
How to make a div align to the right side of the parent while maintaining its vertical position?
Please refer to this handy diagram I drew:
div1's height is unknown. div3's width is fluid; it should never overlap div2. Both div1 and div2 have the same width and are horizontally centered via margin: auto. How can I position div3 so that it…
sbichenko
- 11,613
- 7
- 43
- 81
31
votes
4 answers
How do I vertically align a div inside a table cell?
How do I vertically center a div that is inside a table cell?
HTML:
CSS:
.rowClass {
vertical-align:middle !important;
…
Stuff
John Anderson
- 985
- 5
- 19
- 25
29
votes
5 answers
iOS 5.0 Safari not vertically centering placeholder in text box
I want to vertically center the text entered in input text boxes on the page.
Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.
However; on iOS 5, Safari displays the typed text vertically…
Nirmal Patel
- 5,008
- 8
- 38
- 52
29
votes
7 answers
Vertical-align image
I have a div that contains an image and a p tag (seen below). I want to align the image in the middle of the div vertically depending on how many lines the paragraph is. Vertical-align doesn't work. I am using JavaScript right now to figure out how…
jakeprzespo
- 333
- 1
- 4
- 6
28
votes
4 answers
Vertical align an image and a multiline text
I´m trying to align an image and a text vertically:
+-------------------------+ -- Viewport
| Text text text |
| +-----+ text text text |
| |IMAGE| text text text |
| +-----+ text text text |
| text text text |…
bceo
- 309
- 1
- 3
- 5
28
votes
1 answer
Vertical Alignment of SVG in CSS
I have a problem with inline SVG alignment. I have created a button with some text and an SVG. And while the alignment works correctly when the SVG is at least as big as the text it fails when the SVG height is smaller than the text.
I have created…
MyWetSocks
- 518
- 1
- 4
- 10
27
votes
5 answers
"vertical-align: middle" does not align to the middle in Firefox
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
CSS:
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
…
DisgruntledGoat
- 62,693
- 62
- 192
- 281
27
votes
3 answers
How to Vertically Center Images on a Line?
What's the best way to center icons on a line when the images are smaller than the line height?
For example (styles inline for easier reading):
![]()
Blah blah…
Jeremy Kauffman
- 9,973
- 5
- 39
- 52
27
votes
8 answers
iOS 7 UITextView vertical alignment
How is that possible that my editable UITextView (placed inside a straightforward UIViewController inside a UISplitView that acts as delegate for the UITextView) is not showing text from the beginning but after something like 6-7 lines?
I didn't…
napolux
- 13,486
- 7
- 48
- 68
26
votes
4 answers
iTextsharp, PdfPCell.VerticalAlignment and PdfPCell.HorizontalAlignment
Im trying to figure out how to get my text inside a PdfPCell to show in the middle. I have tried many different options, like:
myCell.VerticalAlignment = Element.ALIGN_MIDDLE;
myCell.VerticalAlignment =…
Jimmy
- 383
- 1
- 3
- 6
26
votes
4 answers
Vertical alignment of subfigures LATEX
I am working on my thesis and I am struggling with placing 2 images next to each other, so that the second image would be centered vertically along the first one. I was also trying to use subfigure instead of subfloat but neither of them works.
This…
Veronika D
- 941
- 2
- 10
- 10
26
votes
6 answers
Vertically center content of floating div
How do I verically center the content of floating div (which height I don't know)?
There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/)
This should be in the middle
.floating {
…
Pavel S.
- 10,292
- 14
- 68
- 108