垂直對齊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中的內容

回答

相關問題