Question

我有一个自适应的背景图像，我想垂直居中放置文本。我尝试将线条高度和容器高度设置为相等，并且绝对定位top：50％，但是它不起作用。当更改窗口大小时，我还希望文本保持居中。据我所知。谁能帮忙。

<!DOCTYPE html>
<html>
	<head>
		<title>Vertical Center Text</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Vertically Center Text">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			html, body
			{
				margin: 0;
				padding: 0;
			}
			.box
			{
				width: 100%;
				height: 700px;
				background-color: #1F3AC5;
				color: #fff;
				float: left;
			}
			.page-container
			{
				width: 992px;
				margin: 0 auto;
			}
			.text1
			{
				float: left;
				color: #fff; 
				background-color: rgba(0, 0, 0, 0.5);
				text-transform: uppercase;
				font-size: 20px;
				padding: 20px;
				line-height: 25px;
			}
			.text2
			{
				clear: both;
				float: left;
				color: #fff; 
				text-shadow: 2px 2px 4px #000000;
				font-size: 60px;
				line-height: 65px;
			}
			/*mobile*/
			@media only screen and (max-width: 1200px)
			{
				.box
				{
					min-height: 475px;
					height: calc(100vw / 1.714);
				}
			}
			@media only screen and (max-width: 992px)
			{
				.box
				{
					height: 475px;
				}
				.text1
				{
					font-size: 16px;
					margin: 0 20px;
				}
				.text2
				{
					font-size: 40px;
					margin: 0 20px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="page-container">
				<div class="text1">Hello World</div>
				<div class="text2">How are you?</div>
			</div>
        </div>
	</body>
</html>

Answer 1

好吧，我通过将框显示为表格并将框容器显示为表格单元格并使用vertical-align：middle解决了此问题。在这里回答：

<!DOCTYPE html>
<html>
	<head>
		<title>Vertical Center Text</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Vertically Center Text">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			html, body
			{
				margin: 0;
				padding: 0;
			}
			.box
			{
				width: 100%;
				height: 700px;
				background-color: #1F3AC5;
				color: #fff;
				float: left;
				display: table;
			}
			.box-container
			{
				display: table-cell;
				vertical-align: middle;
			}
			.page-container
			{
				width: 992px;
				margin: 0 auto;
			}
			.text1
			{
				position: relative;
				float: left;
				color: #fff; 
				background-color: rgba(0, 0, 0, 0.5);
				text-transform: uppercase;
				font-size: 20px;
				padding: 20px;
				line-height: 25px;
			}
			.text2
			{
				clear: both;
				float: left;
				color: #fff; 
				text-shadow: 2px 2px 4px #000000;
				font-size: 60px;
				line-height: 65px;
			}
			/*mobile*/
			@media only screen and (max-width: 1200px)
			{
				.box
				{
					min-height: 475px;
					height: calc(100vw / 1.714);
				}
			}
			@media only screen and (max-width: 992px)
			{
				.box
				{
					height: 475px;
				}
				.text1
				{
					font-size: 16px;
					margin: 0 20px;
				}
				.text2
				{
					font-size: 40px;
					margin: 0 20px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-container">
				<div class="page-container">
					<div class="text1">Hello World</div>
					<div class="text2">How are you?</div>
				</div>
			</div>
        </div>
	</body>
</html>

Answer 2

我已经记录了CSS中的更改。 Flexbox用于将page-container放置在中间。删除所有浮标以保持文档流完整。

有关flexbox here的更多信息。

html,
body {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 700px;
  background-color: #1F3AC5;
  color: #fff;
  /* float: left; REMOVED */
  display: flex; /* Added */
  align-items: center; /* Center vertically */
}

.page-container {
  width: 992px;
  margin: 0 auto;
}

.text1 {
  /* float: left; REMOVED */
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  font-size: 20px;
  padding: 20px;
  line-height: 25px;
}

.text2 {
  /* clear: both;
  float: left; REMOVED */
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
  font-size: 60px;
  line-height: 65px;
}


/*mobile*/

@media only screen and (max-width: 1200px) {
  .box {
    min-height: 475px;
    height: calc(100vw / 1.714);
  }
}

@media only screen and (max-width: 992px) {
  .box {
    height: 475px;
  }
  .text1 {
    font-size: 16px;
    margin: 0 20px;
  }
  .text2 {
    font-size: 40px;
    margin: 0 20px;
  }
}

<div class="box">
  <div class="page-container">
    <div class="text1">Hello World</div>
    <div class="text2">How are you?</div>
  </div>
</div>

在背景Div上垂直居中放置文本

2 个答案: