Let’s start off by defining a real-world example of why you might need to vertically align different sized font on the same line.
CSS Vertical Align Text with Vertical Align CSS Selector Let’s take a look how we can vertically align our text for the second scenario. You could just tweak the top value until it looks right, but then you’ll end up with a value of 47% or some other random number (or magic number if you like) which isn’t as web developer friendly for my liking.
There are a number of ways to combat this, but assigning the inner div a set height and using the CSS Calc function to work out absolute center is the sleekest option for me. This means the content inside the inner div will fall below the middle of the contain div and just look off. box) to the top of our inner div (.box_content). Let me explain: when you use top 50%, the web browser will calculate 50% from the top of the container div (in this case. Essentially, what I’m doing here is calculating the true middle of the container div, based on the height of the inner div. I’m not going to go into too much detail about the function here, but go read more about it at W3Schools for more information – it’ll be SO worth your time. For those of you who haven’t used the Calc function before, your missing out on a really powerful CSS feature. Secondly, you may be wondering about the use of the CSS Calc function. Otherwise, the div assigned absolute positioning will not be contained to the container – just the webpage itself. With all the wonderful layout functionality that’s built into CSS, using Absolute Positioning in CSS to accomplish our goal of vertically aligning text, in my opinion, is a little bit overkill.īUT for thoroughness, it’s worth mentioning this way of aligning text vertically just in case it’s the only option available to you (for whatever reason).ĬSS Vertical Align Text Scenario 1 – Absolute Positioning by Kris Barton ( CodePen.Īs you may notice, there’s a little more going on in here.įirstly, if you’ve used absolute positioning in CSS before then you’ll know that if I want my item to be positioned absolutely within the containing div, then that divs positioning must be set explicitly to relative. CSS Vertical Align Text with CSS Absolute Positioning There’s minor support on IE10 and IE11 (limited functionality and what you can do must be limited to IE specific CSS selectors), but every other modern browser is basically fine.Īgain, you can check out browser support for CSS Grid yourself at. Can I Use CSS Grid Align-Items?Īgain, a word of warning before you implement this solution: make sure you’re able to use it on whichever web browsers you support.ĭespite CSS Grid is a newer technology than CSS Flexbox, there’s still pretty much the same support there. Here’s a Codepen showing how we vertically aligned our text using CSS Grid:ĬSS Vertical Align Text Scenario 1 – Grid by Kris Barton ( CodePen.įor a simple example such as this, it might seem there’s no difference between the CSS Flexbox and CSS Grid layout modules, but once your layout become a little more complicated the power of the Grid layout style will become more and more apparent.
HOW TO VERTICALLY ALIGN TEXT IN DIV UPDATE
CSS Grid is a bit of an update on CSS Flexbox and is really useful for making great layouts. We can accomplish CSS vertical align text with a newer CSS layout module know as Grid. You can find out more about the browser support for the align-items CSS selector at. So if you need to support older browsers for any reason, just be aware of this. In fact, even IE11 is listed as having only partial support (IE Edge supports it completely). CSS Flex doesn’t work all that great in older browser – particularly IE (surprise, surprise). Why can’t I use it? You might be asking yourself.
0 kommentar(er)
