Вертикально выровнять содержимое в div

У меня есть несколько слайдов с помощью jQuery slidemaster plug in, я хочу, чтобы текст всегда был центрирован, вертикально и горизонтально, но у меня возникают проблемы с вертикальным центрированием текста.Вертикально выровнять содержимое в div

Я пробовал использовать margin: 0 auto; и выравнивание по вертикали: среднее; но он, похоже, не работает, возможно, я использую их на неправильных элементах.

http://codepen.io/anon/pen/eBMoBq

.ms-slide p, .ms-slide h1 { 
 
    color: white !important; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    left: 5084px; 
 
}

<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
\t <div class="slide-content"> 
 
     \t <h1>10,795</h1><p>some text about number</p> 
 
\t </div> 
 
    </div> 
 
</div>

источник

2016-12-06 user3005003

Я добавил ответ ниже, отметьте его, если он работает :) –

Есть так много вопросов о вертикальном выравнивании контента, вы делали какие-либо поиски, прежде чем задавали вопрос? http://stackoverflow.com/search?q=vertical+align – Pete

установить индикацию родительского элемента (.ms-слайд) в таблицу и дочерний элемент (.slide-контент) в ячейку таблицы, а затем установить вертикально-выровненный: средний для ребенка.

.ms-slide p, .ms-slide h1 { 
 
    color: white !important; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    left: 5084px; 
 
    display:table; 
 
} 
 
.slide-content{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    }

<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
\t <div class="slide-content"> 
 
     \t <h1>10,795</h1><p>some text about number</p> 
 
\t </div> 
 
    </div> 
 
</div>

источник

2016-12-06 10:33:22

Держите его коротким и простым :)

.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    left: 5084px; 
 
    text-align: center; 
 
} 
 

 
.ms-slide p, .ms-slide h1 { 
 
    color: white; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    margin: 0 auto; 
 
}

<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
     \t <h1>10,795</h1><p>some text about number</p> 
 
    </div> 
 
</div>

источник

2016-12-06 10:36:03

С Flexbox макете:

.ms-slide p, .ms-slide h1 { 
 
    color: white !important; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    left: 5084px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.slide-content { 
 
    flex: 0 1; 
 
}

<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
\t <div class="slide-content"> 
 
     \t <h1>10,795</h1><p>some text about number</p> 
 
\t </div> 
 
    </div> 
 
</div>

источник

2016-12-06 10:37:05 Sandro

Попробуйте старый способ позиционирования простой CSS, который работает во всех браузерах:

.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    position: relative; 
 
} 
 
.slide-content { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    height: 50px; 
 
    text-align: center; 
 
    color: #fff; 
 
    margin: auto; 
 
    font-size: 12px; 
 
} 
 
h1, 
 
p { 
 
    margin: 0; 
 
}

<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
    <div class="slide-content"> 
 
     <h1>10,795</h1> 
 
     <p>some text about number</p> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-12-06 10:39:51 nashcheez

просто сделать с этим vertical-align:middle собственности, просто попробовать с этим фрагментом

.ms-slide p, .ms-slide h1 { 
 
    color: white !important; 
 
    text-align: center; 
 
    margin: 0; 
 
\t 
 
} 
 
.ms-slide { 
 
    background: rgb(213, 28, 41); 
 
    width: 1266px; 
 
    height: 138.109px; 
 
    left: 5084px; 
 
    display:table; 
 
    
 
} 
 
.slide-content{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Try file</title> 
 
</head> 
 
<body> 
 
<div id="masterslider-md" class="master-slider ms-skin-default"> 
 
    <div class="ms-slide" style="background: #590056;"> 
 
\t <div class="slide-content"> 
 
     \t <h1>10,795</h1><p>some text about number</p> 
 
\t </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

источник

2016-12-06 10:43:57

Вертикально выровнять содержимое в div

ответ

Смежные вопросы