Question

我有多个幻灯片使用jQuery slidemaster插件，我希望文本始终在中心，垂直和水平，但我无法垂直居中文本。

我尝试过使用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;">
	<div class="slide-content">
     	 <h1>10,795</h1><p>some text about number</p>
	</div>
    </div>
</div>

Answer 1

使用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;">
	<div class="slide-content">
     	 <h1>10,795</h1><p>some text about number</p>
	</div>
    </div>
</div>

Answer 2

将父元素（.ms-slide）的显示设置为table，将子元素（.slide-content）设置为表格单元格，然后为子元素设置 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;
  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;">
	<div class="slide-content">
     	 <h1>10,795</h1><p>some text about number</p>
	</div>
    </div>
</div>

Answer 3

简而言之：）

.service

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

Answer 4

尝试适用于所有浏览器的旧的简单CSS定位方式：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

只需使用此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;
  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;">
	<div class="slide-content">
     	 <h1>10,795</h1><p>some text about number</p>
	</div>
    </div>
</div>
</body>
</html>

垂直对齐div中的内容

5 个答案: