Center Text Vertically Within <Div>

How do I vertically align text in a div?

The correct way to do this in modern browsers is to use Flexbox.

See this answer for details.

See below for some older ways that work in older browsers.


Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

For a CSS 2 browser, one can use display:table/display:table-cell to center content.

A sample is also available at JSFiddle:

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>

How can I center text (horizontally and vertically) inside a div block?

If it is one line of text and/or image, then it is easy to do. Just use:

text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.



Update for 2020:

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

#container {
display: flex;
justify-content: center;
align-items: center;
}

To specify a fixed width for the child, which is called a "flex item":

#content {
flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

To shrink-wrap the content, it is even simpler: just remove the flex: ... line from the flex item, and it is automatically shrink-wrapped.

Example: http://jsfiddle.net/2woqsef1/2/

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column; to the flex container. This is how it works between a flex container and its immediate child elements.

There is an alternative method of doing the centering: by not specifying center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.



Update for 2016 / 2017:

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

position: relative;
top: 50%;
transform: translateY(-50%);

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height method would work. Otherwise, flexbox would do the job.

Vertically align text within a div

Create a container for your text content, a span perhaps.

#column-content {  display: inline-block;}img {  vertical-align: middle;}span {  display: inline-block;  vertical-align: middle;}
/* for visual purposes */#column-content { border: 1px solid red; position: relative;}
<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png"> <span><strong>1234</strong> yet another text content that should be centered vertically</span></div>

How do I vertically center text with CSS?

You can try this basic approach:

div {  height: 100px;  line-height: 100px;  text-align: center;  border: 2px dashed #f69c55;}
<div>  Hello World!</div>

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.


In a nutshell (and to prevent link rot):

  • Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
  • For block elements, vertical alignment is harder and strongly depends on the specific situation:
    • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
    • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
    • … there are more such special cases.

Vertically center text inside a div

Since you are using flexbox, you don't need to use vertical-align.

Here are two things to consider:

  1. When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.

    Your div boxes wrapping your text are not flex items. They are children of flex items (#first, #second, etc.) and flex properties don't apply.

  2. If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well.

    Try this:

    #first { 
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #second {
    display: flex;
    justify-content: center;
    align-items: center;
    }

#first {
display: flex;
justify-content: center;
align-items: center;
}

#second {
display: flex;
justify-content: center;
align-items: center;
}
<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
<div id="first" style=" min-height:100px; min-width:200px; background-color:green">
<div style="vertical-align:middle">first box</div>
</div>
<div id="second" style=" min-height:100px; min-width:200px; background-color:yellow">
<div style="vertical-align:middle">
second box
</div>
</div>
<svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
<!--snipped away svg code-->

</svg>
<div id="third" style="min-height:100px; min-width:200px; background-color:red">
<div style="">
third box
</div>
</div>
<div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
<p>
fourth box
</p>
</div>

</div>

How to vertically align text within div element css?

ex) display: table

div{  display: table;  width: 100px;  height: 50px;  background-color: #000;}
div p{ display: table-cell; text-align: center; vertical-align: middle; color: #fff;}
<div>  <p>chatter</p></div>

How to center text within a DIV vertically and horizontally

Try this:

<div class="bubble">
<p>blablabla</p>
</div>

.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}

.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}

here is a fiddle: http://jsfiddle.net/hLwzymmL/

Center text vertically in a div?

Try this

http://css-tricks.com/vertically-center-multi-lined-text/

Center Text Vertically Within DIV

This:

<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>

<div class="outer">
<p>This text will be vertically aligned</p>
</div>

<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>

works in modern browsers, regardless of whether text spans only one or multiple lines.

Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.



Related Topics



Leave a reply



Submit