Vertical Align Text in Block Element

Vertical align text in block element

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

All you need to do is:

display: flex;
align-items: center;

See this fiddle.

Vertical align elements displayed as block inside of div

You can do this with display:flex:

.list {  width: 100%;  height: 100%;}
.row {  display: flex;  justify-content: center;  align-items: center;  text-align:center;  width: 100%;  height: 30px;}
.name {  display: block;  float: left;  width: 30%;}
.message {  display: block;  float: left;  width: 70%;}

<div class="list">  <div class="row">    <div class="name">Ben</div>    <div class="message">Hello world</div>  </div>  <div class="row">    <div class="name">Tom</div>    <div class="message">Hello world</div>  </div>  <div class="row">    <div class="name">NoName</div>    <div class="message">Hello world</div>  </div>

Vertical-Align a Block Element

You can use table and table-cell: And move your class='title' inside img-holder

Fiddle

With padding left away from image - fiddle

.title-block {
    width:272px;
    height: 110px;    
}

.img-holder {    
    margin: 0 6px 0 0;
    position: relative;
    display: table;
}

img, .title{
    display:table-cell;
    vertical-align: middle;
}
.title {
    text-transform: uppercase;
    margin: 8px 0 9px;  
}

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.

vertical alignment of block element

Here we go ... just let the image be an image (inline) and add this to your .myContainer

display: table-cell;
text-align: center;
vertical-align: middle;

Sample snippet

.myContainer {  width: 100px;  height: 100px;  background-color: lightblue;  display: table-cell;  text-align: center;  vertical-align: middle;}
.myImage {  width: auto;  max-width: 20px;  height: auto;  max-height: 22px;  border: 1px solid lightslategrey;}

<div class='myContainer'>  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'></div>

CSS: Vertically aligning inline-block element in a line of text

Vertical-align doesn't work like you would think it would. It's used in HTML tables, but doesn't work in divs. It's been a pain for a while. Luckily, nowadays you can achieve this easily with flexbox.

To achieve this, wrap your two bits of copy in individual span elements, so your structure looks like:

<div class="button-content">
    <span>buy for</span>
    <div class="icon"></div>
    <span>1000</span>
</div>

Then your css should look like this:

.button-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 130px;
}

Or if you can't support flexbox, your .button-content can be set to display: table-cell; and the vertical-align: middle; should work.

I strongly recommend flexbox.

Vertical align text with a link inside a div block

You can realize this layout as follows.

First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.

Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.

Third, apply vertical-align: middle to the p element for it to have the
desired effect.

This approach will work with any number of text lines, as demonstrated.

See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/

.panel {    background:#F7C0B9;    width:645px;    height:170px;    margin:0 auto;    outline:1px solid #FFF;    text-align:center;    line-height: 170px;}.panel p {    vertical-align: middle;    display: inline-block;    border: 1px dotted gray;    line-height: 1.25;}

<div class="panel">    <p>Text<br /> <a href="#">Link<br>a 3rd line for example</a></p></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 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.

---

Related Topics