Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently requesting a tutorial on vertically centering so I thought why not. You can view demos of each of the methods below. Clicking the images above each section will also take you to that specific demo. Let’s start by first talking about something that doesn’t work as many expect. I have a div element which contains text, and I want to align the contents of this div vertically center. Here is my div style. Free photo mosaic. And why it doesn’t always work will help us better understand vertical centering in general. Vertical-Align is rather easy. When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to in order to center things vertically. It seems logical and I know it was my first choice. If you’ve come from table based layout you likely used the valign attribute, which would also lead you to believe vertical-align is the way to go. However valign only worked on table cells. Vertical-align is similar. It also applies to table cells and it works with some inline elements. The values for vertical-align have meaning with respect to a parent inline element. • With a line of text the values are relative to the line-height. • With a table cell the values are relative to the, which usually means the height of the row. Unfortunately doesn’t apply to block-level elements like a paragraph inside a div, which is where most of us figure out it isn’t the be all solution to vertical centering. All is not lost though, as we have other methods for centering block level elements and we can still use vertical-align where appropriate. Which method you choose will depend on what you’re trying to center relative to its container element. Line-Height Method This method will work when you want to vertically center a single line of text. All we need to do is set a line-height on the element containing the text larger than its font-size. By default equal space will be given above and below the text and so the text will sit in the vertical center. Most tutorials will also set the height on the element with the same value given to the. I don’t think setting the height is necessary, but if line-height alone doesn’t work for you setting the height of the element will likely be the solution. Thank you Mr. Bradley for your answer. It made me review your methods to try combining the table method with the floating fixed-sized divs that made my gallery of images shown as “slides” automatically adapt the number of columns to the browser width. And it WORKED! Assigning the fixed-sized “slide” divs a “display: table” and adding an extra div to contain both picture and title text with “display: table-cell” and “vertical-align: middle” made the contents centre vertically. Coloring the div borders during testing strangely showed that this extra div doesn’t scale to match the contents but expands to the same size as the table div, but as it doesn’t show it doesn’t matter. Now I received a notification for your comment abovestrange For your information the very first time when I wrote my comment and before sending it I was offered to type a number as a check. So I did and everything looked fine since my comment was posted. Then I was on my work computer. Afterwords and now I’m writing from my own computer and as I received already a notification it seems fine. Both times I used my email: (giving you to check if I have missed to type it correctly) and you can check it. However, don’t know exactly what have caused the issue, and apologize for bothering you. Take it just as a feedback which might be in help. Just wanted to add for anyone reading that apparently the problem Georgi had in commenting was due to the plugin I use to help prevent spam comments. I’m not entirely sure why, but the plugin flagged Georgi as a possible spammer (which he clearly isn’t) and so wouldn’t let his comment through. I’m guessing it was originally because of an IP address that had been flagged and then once in the system it’s flagging other things like his email address.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |