Posted in css
701
9:55 am, July 29, 2021

vertically align text within a fixed height div using flex

this can be used to make text align nicely while still keeping the same layout.

the example below shows how you can set the height of the containing element and still have the text aligned center to that element. so if you had a layout that required the top of the element height to be fixed for some reason, the text still looks ok, unless the text still overflows that element in length.

If the text does still overflow you could then use something like text-overflow ellipsis to clip the additional text with css.

An example of how this can be used to fix a layout would be using the following:

Set a height on the title element, and then use the flex center on the text, and this should then no longer break the layout.

set the height of all of the titles to the longest title height.

and then move it up a bit, and apply the truncate and the flex center. and check how it looks. 

so now after applying the height and the flex alignment the items look like this

you can see how the item #3 does not push down the bottom element. so its good for a title of quite a long length.

here are the css changes to get the above changes

change to the margin on top, and then adding the text to still align left, and then center everything else. so it will vertically align to the center of the div. 

HTML

<div class='vert-text short-title'>short title</div>

<div class='vert-text long-title'>long title long title long title long title long title long title long title</div>

<h3>Game Top Title</h3>
<p>double line centered and left aligned text, so still fit in the element and not be aligned to the top.</p>
<div class='game-top-title-main'>
  [@title]
</div>

CSS

.vert-text {
    height:100px;
    padding:20px;
    width:300px;
    border:1px solid #000;
    border-radius:3px;
    display: flex;
    justify-content: center;  
    align-items: center; 
}

/* before the flex changes */
.game-top-title-main {
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    margin-top: 22px;
    border-bottom: 1px solid rgba(250,250,250,.125);
    padding-bottom: 10px;
    line-height: 1.1;
    height:55px;
}

/* after the flex changes */
.game-top-title-main {
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    border-bottom: 1px solid rgba(250,250,250,.125);
    padding-bottom: 10px;
    line-height: 1.1;
    height: 55px;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
}
short title
long title long title long title long title long title long title long title

Game Top Title

double line centered and left aligned text, so still fit in the element and not be aligned to the top.

[@title]

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in css
animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css how to make a transparent logo white with css target last item css with :last-of-type target first item css with :first-of-type responsive menu research full screen multi level make your images look non squished when not using image backgrounds v2 target 1st td in a table with css backdrop-filter: blur(10px); add chevrons to a ul list foundation responsive tables allow a title to be in the foreground while still having a before overlay for the background css responsive max and min targets @media pre-line white space settings pre-wrap preserve line spacing but also wrap where needed css double page document preview with shadow adding a background image to the titles of the dark mode card on this page blur the background image while keeping the foreground normal background image greyscale filter while foreground is still in colour zoom background of element when active rounded click me button with icon logo tickers marquee slow scrolling add a moving chevron to your href link inline form field padding using text-stroke to add a border to your text adding background blur to an image using css fill screen using the nth-of-type selector to target a class with the same name github logo background png css animated rings expanding with delay ripple water effects css slow zoom in animation using the last-of-type css selector to remove a border from the last item in a list box hover over effects using pulsate animation using multiple text shadow box shadow example(s) - drop shadow @import and html link to Montserrat font family google font my default text shadow css change the cursor to a pointer for an element make labels or badges look better
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown