How to vertically align Bootstrap v4 modal dialogs

Update, as of Beta 3, [docs]: Add .modal-dialog-centered to .modal-dialog to vertically center the modal. Original answer: SCSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; @media(max-width: 768px) { min-height: calc(100vh – 20px); } } or unprefixed CSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: …

Read more

jQuery – Scroll element to the middle of the screen instead of to the top with an anchor link

Here’s how to do it with plain JQuery using scrollTo() $(‘.main-nav a’).on(‘click’, function(e) { var el = $( e.target.getAttribute(‘href’) ); var elOffset = el.offset().top; var elHeight = el.height(); var windowHeight = $(window).height(); var offset; if (elHeight < windowHeight) { offset = elOffset – ((windowHeight / 2) – (elHeight / 2)); } else { offset = …

Read more

UITextField Vertical Alignment

You should subclass a UITextField, and override the following methods: – (CGRect) textRectForBounds: (CGRect) bounds { CGRect origValue = [super textRectForBounds: bounds]; /* Just a sample offset */ return CGRectOffset(origValue, 0.0f, 4.0f); } – (CGRect) editingRectForBounds: (CGRect) bounds { CGRect origValue = [super textRectForBounds: bounds]; /* Just a sample offset */ return CGRectOffset(origValue, 0.0f, 4.0f); …

Read more

How to vertically center the contents of a flexbox item

It can be achieved by displaying each flex item as a flex container and then aligning the contents vertically by align-items property, as follows: .flex-container { display:flex; align-items:center; height: 200px; /* for demo */ } .flex-item { align-self:stretch; display:flex; align-items:center; background-color: gold; /* for demo */ } <div class=”flex-container”> <div class=”flex-item”> I want to be …

Read more

Center an tag inside a

You can add line-height:51px to #AlertDiv h1 if you know it’s only ever going to be one line. Also add text-align:center to #AlertDiv. #AlertDiv { top:198px; left:365px; width:62px; height:51px; color:white; position:absolute; text-align:center; background-color:black; } #AlertDiv h1 { margin:auto; line-height:51px; vertical-align:middle; } The demo below also uses negative margins to keep the #AlertDiv centered on both …

Read more