Question

我已尝试过将<p>标记放在<div>的中心位置。当我尝试text-align: center;时没有任何反应。我试图改变显示类型，但没有任何改变。非常感谢你。我根本不知道我做错了什么。

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.w1-3 {
  width: 33.33%;
  width: calc(100% / 3);
  display: inline-block;
  height: 100%;
}

.background {
  height: 100%;
}

#left {
  background-color: #e74c3c;
}

#middle {
  background-color: #3498db;
}

#right {
  background-color: #2ecc71;
}

#questions {
  font-size: 50pt;
  color: white;
  text-align: center;
  display: inline;
}

.title {
  font-family: 'Montserrat', sans-serif;
}

.text {
  font-family: 'Open Sans', sans-serif;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">
<div class="w1-3" id="left">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>
<div class="w1-3" id="middle">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>
<div class="w1-3" id="right">
  <div class="background">
    <p class="title" id="questions">Hello</p>
  </div>
</div>

Answer 1

这是因为您为display: inline div设置#questions，然后只占用内容宽度，因此无法水平居中，因此请将其删除或注释以达到所需结果，因为text-align: center已经设置：

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.w1-3 {
    width: 33.33%;
    width: calc(100% / 3);
    display: inline-block;
    height: 100%;
}

.background {
	height: 100%;
}

#left {
	background-color: #e74c3c;
}

#middle {
	background-color: #3498db;
}

#right {
	background-color: #2ecc71;
}

#questions {
	font-size: 50pt;
	color: white;
	text-align: center;
	/*display: inline; the culprit */
}

.title {
	font-family: 'Montserrat', sans-serif;
}

.text {
	font-family: 'Open Sans', sans-serif;
}

＆＃13;

<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">
</head>
<body>
<div class="w1-3" id="left">
	<div class="background">
		<p class="title" id="questions">Hello</p>
	</div>
</div><div class="w1-3" id="middle">
	<div class="background">
		<p class="title" id="questions">Hello</p>
	</div>
</div><div class="w1-3" id="right">
	<div class="background">
		<p class="title" id="questions">Hello</p>
	</div>
</div>
</body>
</html>

＆＃13;

Flexbox解决方案：

＆＃13;

* {box-sizing:border-box} /* recommended */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.flex-container {
  display: flex; /* displays children inline by default */
}

.w1-3 {
  flex: 1; /* each 33.33% of the parents width */
  /*
  width: 33.33%;
  width: calc(100% / 3);
  display: inline-block;
  */
  height: 100vh; /* modified */
}

.background {
  /*height: 100%;*/
}

#left {
  background-color: #e74c3c;
}

#middle {
  background-color: #3498db;
}

#right {
  background-color: #2ecc71;
}

#questions {
  font-size: 50pt;
  color: white;
  text-align: center;
  /*display: inline; the culprit */
}

.title {
  font-family: 'Montserrat', sans-serif;
}

.text {
  font-family: 'Open Sans', sans-serif;
}

/* addition */
@media screen and (max-width: 600px) { /* adjust the breakpoint to your needs */
  .flex-container {
    flex-direction: column; /* stacks children vertically */
  }
}

＆＃13;

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans">

<div class="flex-container">
  <div class="w1-3" id="left">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
  <div class="w1-3" id="middle">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
  <div class="w1-3" id="right">
    <div class="background">
      <p class="title" id="questions">Hello</p>
    </div>
  </div>
</div>

＆＃13;

同样正如@Bindrid指出的那样，您只需将text-align: center添加到其父级或.background div即可将内容居中，这样您就可以保留display: inline你＆＃ 39;已为#questions div设置。

为什么我的段落标记不以HTML为中心？

1 个答案: