How to center text within a DIV vertically and horizontally

Question

<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
    <span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>

Displays this:

enter image description here

How can I modify the CSS, so the quote is always centered within the background image

Duplicate of a very common question across the internet, search first ask questions later! — Dead.Rabit, Oct 29 '14 at 13:25

score 5 · Accepted Answer · answered Oct 29 '14 at 13:14

5

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/

answered Oct 29 '14 at 13:14

Caio Kawasaki

2,894
6
33
69

Where do I add the padding around so the text doesn't overflow on to the DIV? – Si8 Oct 29 '14 at 13:17
inside .bubble p{} / something like that: .bubble p { display: table-cell; vertical-align: middle; text-align: center; padding: 0 20px; } – Caio Kawasaki Oct 29 '14 at 13:24

Daan · Answer 2 · 2014-10-29T13:33:27.303

It depends whether you want to center horizontally or vertically:

Horizontally you should give these styles to the object:

For text only:

#parent {
text-align: center;
}

For objects other than text:

#child {
margin-left: auto;
margin-right: auto;
}

or:

#child {
margin-left: 0 auto;
}

Vertically it's a bit more difficult, you have to set display: table to the parent and display: table-cell to the child, so that you can set the style vertical-align: middle to the child.

#parent {
display: table;
}

#child {
display: table-cell;
vertical-align: middle;
}

JSFiddle demo

score 1 · Answer 3 · answered Oct 29 '14 at 13:13

You can simply set your outter container to have display:table; and your inner container to have display:tabe-cell;

div{
    display:table;
    text-align: center; 
}

span{
    display:table-cell;
    vertical-align: middle;
}

vertical-align: middle; only works on table elements.

score 1 · Answer 4 · answered Oct 29 '14 at 13:23

1

demo - http://jsfiddle.net/victor_007/hLwzymmL/1/

.bubble p {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

answered Oct 29 '14 at 13:23

Vitorino fernandes

15,794
3
20
39

score 1 · Answer 5 · answered Oct 29 '14 at 13:24

Do it like this:

HTML markup:

<div class="wrapper">
    <span class="middleelement">This is some text..</span>
</div>

CSS:

div.wrapper {
background: #008000;
background-size: 100% 100%;
text-align: center;
display: table;
width: 100%;
height: 285px;
}
.middleelement {
color: #FFF;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

Se the demo here: http://jsfiddle.net/e16uhcrz/2/

How to center text within a DIV vertically and horizontally

5 Answers5