Как центрировать текст внутри DIV по вертикали и по горизонтали

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> 

Дисплеи этого:

Как модифицируют CSS, поэтому котировка всегда сосредоточены в пределах фонового изображения

Answer 1

Попробуйте это:

<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; 
} 

здесь скрипку: http://jsfiddle.net/hLwzymmL/

Answer 2

You может просто установить ваш контейнер для носа в display:table;, а ваш внутренний контейнер должен иметь display:tabe-cell;

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

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

vertical-align: middle; работает только с элементами таблицы.

Answer 3

Это зависит от того, хотите ли вы к центру по горизонтали или по вертикали:

Horizontally вы должны дать эти стили объект:

только для текста:

#parent { 
text-align: center; 
} 

Для других объектов, чем текст:

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

или:

#child { 
margin-left: 0 auto; 
} 

---

VERTIC ally это немного сложнее, вам нужно установить display: table родительскому и display: table-cell ребенку, чтобы вы могли установить стиль vertical-align: middle ребенку.

#parent { 
display: table; 
} 

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

JSFiddle demo

Answer 4

демо - http://jsfiddle.net/victor_007/hLwzymmL/1/

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

Answer 5

Делают это так:

HTML разметка:

<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 демо здесь: http://jsfiddle.net/e16uhcrz/2/