垂直对齐div中的内容

我有多个使用jQuery slidemaster插件的幻灯片，我希望文本始终居中，垂直和水平，但我在垂直居中文本时遇到问题。垂直对齐div中的内容

我试过使用margin：0 auto;和vertical-align：middle;但它似乎没有工作，也许我正在使用他们在错误的元素。

.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中的内容

回答

相关问题