Questions tagged [vertical-alignment]

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

Filter by
Sorted by
Tagged with
0 votes
2 answers
40 views

Vertical alignment of flutter text

Hi all I am trying to add a custom font 'Gill Sans' to my mobile app. However when I try and align an icon/ icon button and text on the same line they seem to look very out of alignment. It seems that ...
RishV's user avatar
  • 49
0 votes
0 answers
21 views

Flutter vertical align dropdown button with autocomplete

Can anybody help to align verticaly dropdown button with autocomplete field in flutter ? It look's like below : I was trying many different things but depends on emulator device it's always too tall ...
D. D.'s user avatar
  • 19
0 votes
0 answers
29 views

The parent node "container" has height ,margin can be calculated,Why "item" css margin-top and margin-bottom has no effect,? [duplicate]

The parent node "container" has height ,margin can be calculated,Why "item" css margin-top and margin-bottom has no effect? body,html { margin: 0; padding: 0; } ....
zhang xue's user avatar
1 vote
1 answer
36 views

RichText containing TextField: vertical alignment

I would like to use a RichText widget containing TextSpans as well as inline TextFields (inside WidgetSpans). The TextField text should be aligned to the same vertical baseline as the TextSpans. How ...
thmint's user avatar
  • 58
0 votes
0 answers
14 views

Beaver Builder, how can I align buttons in a advanced post module?

How can I align the buttons in a UABB advanced posts module, as shown below. Using css Flex breaks the lay-out. Wondering if it's possible enter image description here Tried to use: { display: flex;...
HansieHansie's user avatar
0 votes
1 answer
38 views

Aligning list texts to the centre of bullet icon

Trying to align the list texts to the svg icons of the bullets in an unordered list. Tried a lot of the solutions available on the internet but setting vertical-align: middle does not do anything and ...
KaraageAndKamehameha's user avatar
1 vote
0 answers
40 views

Using JavaScript .join() results in misaligned vertical characters

I'm using the following code to wrap every word inside two span elements: <p data-anim="wrap-words">Lorem ipsum dolor sit amet.</p> function wrapWords() { const strings = ...
fr-haus's user avatar
  • 11
0 votes
0 answers
22 views

WP Bakery Customization

Using WP Bakery, I'd like assistance with customising content within and equal height column. I'd like to justify content within columns to have the top most content at the top of its column and the ...
naas's user avatar
  • 1
0 votes
1 answer
60 views

How to align two inputs horizontally [duplicate]

I am currently a very beginner in css and html. I am trying to make a login page, but i just can't align my two inputs. I want to have the labels "Username :" and "Password :" on ...
Reepers's user avatar
0 votes
0 answers
146 views

How to adjust when Swiper.js advances to the next slide?

What I'm Doing I'm using Swiper.js in Webflow to make two connected vertical sliders, one with images and one with text (title, desc). I'm using the Swiper thumbs module to connect the two sliders. I'...
Zacaria Wilson's user avatar
1 vote
1 answer
59 views

Trying to center a card on a page

i am not able to center a card on the webpage. I've used Flex to center it, but it is only aligning it horizontally, not vertically. The output that i was expecting: Output that i got: My Code for ...
Alan's user avatar
  • 11
0 votes
0 answers
57 views

How can I vertically align <ruby> element with regular text

Is there a way to vertically align <ruby> element with the bottom of regular text ? Here are my css & code: body { font-family:"Times New Roman"; } ruby { font-family:"...
Andley Chang's user avatar
0 votes
1 answer
46 views

Adjust vertical position of a stroke inside another stroke

I am having trouble adjusting the vertical position of a stroke that appears inside another stroke using stroke-dashoffset and stroke-dasharray : <svg viewBox="0 0 100 100" width="400"> &...
JDMCreator's user avatar
-2 votes
1 answer
31 views

Vertically align <figure> within CSS Grid [closed]

I am trying to vertical align images in a grid. I am using the <figure> HTML element with caption for the images. The images replace checkboxes. My code: /* @media (min-width: 600px) { */ ....
Maurice's user avatar
  • 1,147
1 vote
3 answers
99 views

Align text baselines across columns in CSS

I am faced with the CSS implementation of a multi-column layout that aligns the first line of the second column, which may have various font sizes, to the second line of the first column. Like this: (...
fbmd's user avatar
  • 740
1 vote
1 answer
20 views

how to trim vertical text inside flex: 1?

I'm struggling to center and trim a vertical rotated text inside a flex: 1 .wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; } ...
wittgenstein's user avatar
  • 3,932
0 votes
1 answer
38 views

Align items is doing the job of justify content and justify content isn't working

why is the align items in this code centering child elements on the x-axis instead of the y-axis and the justify content center doesn't do anything and when I remove the justify content it is still ...
DYNAM1X25's user avatar
0 votes
1 answer
37 views

Difficulty centering <nav> vertically in flexbox

Here's the relevant code. I need to align the nav menu vertically in the green area (.menu-box). I can only seem to center it horizontally. What am I missing? (I tried vertical-align: middle; but to ...
Karlton's user avatar
  • 35
0 votes
0 answers
47 views

Text in the input is cut of vertically in safari

I have a problem. The dots in the input type of password is cut, I can see only the half as in the screenshot. The point is that is not aligned vertically neither in chrome or safari. But in chrome ...
Gopal Singh's user avatar
2 votes
1 answer
34 views

Does a flex item not need to be an explicit element inside flex container?

<!-- HTML --> <body> <div class="header"> My awesome website </div> </body> /* CSS */ .header { height: 72px; background: darkmagenta; ...
bhp's user avatar
  • 111
1 vote
2 answers
52 views

Align the TextField in the form

Hello I created a form with 4 rows, each row contains a Text and 2 Textfields, as you can see from the picture they are not aligned vertically I can't find the way to align all of them and fix the ...
Damiano Miazzi's user avatar
0 votes
0 answers
26 views

Apple Mail signature changes alignment of an element on Gmail

I'm trying to complete a quite simple e-mail signature, and I had to work on Apple Mail first. The following code works fine in Apple Mail and even on browsers, but Gmail changes the alignment of the ...
Foka2's user avatar
  • 1
0 votes
2 answers
57 views

how to vertically align css boxes

I am trying to align CSS info boxes for a medical practice website at the same heightscreen shot the first two boxes appear fine except for the last one. i want the boxes to appear align at the same ...
stealthcamouflougeSA's user avatar
2 votes
2 answers
19 views

Vertical text affects other text placement

I'm trying to make an online portfolio using HTML and CSS, but I'm having trouble with some vertical alignment. I want to have a line of vertical text that goes down the left side of the screen that ...
Dragynjump's user avatar
0 votes
0 answers
19 views

Bootstrap form center alignment issue: how can I align vertically and horizontally? [duplicate]

I am trying to vertically and horizontally align my form into the centre of my screen but it does not do it could someone please help me resolve this error <div class="container"> <...
Helper123's user avatar
1 vote
1 answer
553 views

How can I align vertically/on top tikz pictures (circuitikz) in minipage/figure/tabular environment?

I am trying to align vertically this 3 circuits. I would like to align the on top, instead of bottom part (they automatically align bottom with that code) \documentclass{article} \usepackage{graphicx} ...
Anibal Marrero's user avatar
0 votes
0 answers
508 views

Latex and Overleaf; Two column text, Vertical Blank space and Overfull Text Box

As I can't find an appropriate solution I wanted to look for help here. In the following picture is an example of my problem (I just changed the text for an sample). Throughout the whole document is a ...
nils.bo's user avatar
0 votes
1 answer
97 views

Lua add a variable amount of characters to String

I want to add an amount characters to a print, that equals space. if #input >= 1 then for var=1, #input, 1 do [...] av = "was sent" else av = "doesn't exist"...
aGuyCalledT's user avatar
0 votes
1 answer
100 views

CSS vertical-align: text-top; not working for the span elements in my <p> tag?

I want the top of any lower span tag attached to the base (bottom) of the an upper span tag, just like in the image. I wanted to make the span elements align, so that the top of each span tag is at ...
Coding Nerd 's user avatar
0 votes
2 answers
65 views

Vertical distibution of slected shapes by shapes centres in PowerPoint

I try to write a VBA code that will distirbute verticaly selected shapes but based on shapes centres, not spaces between shapes (as default in powerpoint distribute vertaly function). I have started ...
Bartek's user avatar
  • 5
0 votes
1 answer
14 views

Identify and eliminate a stubborn white line

I am trying to eliminate a white line just under the homepage video of this site . Can some css magician help me? Thank you Alberto I eliminated all paddings and margins from the various containers, ...
Alberto's user avatar
  • 11
0 votes
2 answers
294 views

How to center the text vertically using bootstrap

I'm creating a portfolio using bootstrap. For some reasons i can't get the text vertically centered. i have tried align-items-center and justify-content-center with no luck. Here is the code: <div ...
Stalin D'souza's user avatar
0 votes
1 answer
270 views

valign and vertical-align not working inline HTML for email

I've tried everything I can and this table just does not seem to want to honor any kind of vertical alignment html. I want the image to be centered in the container as well as the text side so no ...
Lindsey Drennan's user avatar
0 votes
1 answer
148 views

Align div element at the bottom of another div element using Bootstrap 5

I have three cards which can be displayed side by side. Motivations is, that the orange part with the icon should be always displayed at the bottom, when all are displayed side by side. How can I ...
Lovro's user avatar
  • 185
0 votes
2 answers
64 views

How to vertical-align a dot (from a font) inside its own div?

Considering code below: .switch { display: flex; appearance: none; border: none; background-color: white; align-items: center; } .switch::before { height: 45px; border-radius: 200px;...
charnould's user avatar
  • 2,543
-1 votes
2 answers
31 views

Why HTML elements are not displayed one below the other when I center them with Flexbox and their parent element is <body>?

I came across a situation that I don't really understand. I wanted to center two elements and after reading the article below, I decided to use flexbox to do that. https://www.freecodecamp.org/news/...
Sam Lee's user avatar
  • 11
0 votes
0 answers
36 views

Alignt Checkboxes vertically in Bootstrap 4 Table

I have a Bootstrap 4 Table which looks like this: This is the HTML of a cell: <td id="Cell-1" class="text-center"> <label><input class="form-check-input&...
user363808's user avatar
0 votes
2 answers
117 views

vertical center content in a boostrap column with 100% height

columns need to be the whole height of the row but the content (text) still needs to be vertically centered. <div class="row fixed-bottom mobile-navbar align-items-center"> <...
decentduck's user avatar
0 votes
2 answers
122 views

Can't align the input text with the radio button properly

HTML <fieldset> <label id="radio-buttons">Would you recommand this website? <input type="radio" name="radio" value="button" ...
twig's user avatar
  • 1
0 votes
0 answers
109 views

How to aligning comments in R

I have a question: Is there any way (function, keyboard shortcut, addin or something like that) that allows me to align the comments next to the code in R in a practical way? I mean, how can I align ...
Anthony Romero's user avatar
0 votes
1 answer
30 views

how do I make these the same height

The verses aren't the same height near the bottom and I want each verse side by side to be the same height. here's my code currently: .verse img { height: 1em; } <h1>PSALM 1</h1> &...
kf.'s user avatar
  • 1
0 votes
0 answers
35 views

In a Google Sheets Combo Chart graph, how do I shift the right vertical axis to align to zero

I have created a Combo Chart in Google Sheets. It is located here and you may view it in Google Sheets: https://docs.google.com/spreadsheets/d/1ONyBoutlNBC__0HqMmhtCL1AWxgoqHiiHg1FxTdXiE0/edit#gid=...
ElliotB's user avatar
  • 153
-2 votes
1 answer
34 views

Custom Bootstrap Vertical Layout

I'm trying to build a vertical row layout using Bootstrap, only problem is that when I adjust the height it pushes the other column down the page and out of place. I have drawn up a quick example of ...
Avanae's user avatar
  • 1
1 vote
1 answer
55 views

how to vertically align the content of a card in bootstrap?

im trying make a card like this: Example Card but, i can't to do that the items are on the bottom: My Card Code: <div class="container"> <div class="row row-cols-1 row-cols-...
N1c0's user avatar
  • 11
1 vote
1 answer
74 views

Centering items in my grid broke its border. Don't understand why

I've added align-items: center in order to center Link 2 vertically due to a very long description. But doing so broke the grid border. How can this be fixed? Thank you in advance. The full code is ...
Alan's user avatar
  • 93
1 vote
1 answer
73 views

Align <button> element bottom inside a flex-grid

I am trying to align-bottom a button in the 2 column. I tried almost everything including position:absolute and relative. Here a link explaining what I am doing https://www.beerstrot.it/cavecchia....
Andrea T's user avatar
0 votes
1 answer
329 views

In Chrome min-height: 100% along with flexbox’s align-items: center; doesn't make items vertically center [duplicate]

- Using Chrome, if a container has min_height and display:flex; the items inside it will not change adding align-items:center; while it works by giving a fixed height. - Using Firefox the problem does ...
Andrea de Martinis's user avatar
0 votes
2 answers
101 views

vertical center svg and text inline with css

I wanna center vertical an icon and text, both in the same container, I tried to set up svg as inline-block element and use vertical-align: middle but I see its not on the middle. Any simple way to ...
Hans Felix Ramos's user avatar
1 vote
2 answers
58 views

I don't manage to get an element sticking to the bottom using flexbox

I want to align two elements in such a way, that one sticks to the top, and one to the bottom of the viewport. I'm trying to achieve this with flexbox, but don't want to use absolute positioning. ...
Alessandro's user avatar
0 votes
0 answers
18 views

Vertical Alignment inside Blocs in flex mode §in Blogger)

2 blocks sample in flex mode with 2 blocks side by side, block 1 with an image, block 2 with text in 2 parts, 1 part comment of the image and 1 part caption of the author of the image, how can I align ...
lfone's user avatar
  • 1

1
2 3 4 5
66