html - 如何水平对齐内容-6ren

html - 如何水平对齐内容

转载作者：行者123 更新时间：2023-11-28 03:14:55

我是新来的，所以提前为这个问题道歉......

我正在尝试创建 3 个文本 block ，但将它们水平对齐。我不想创建按钮，只想创建文本 block 。

这个 HTML 似乎不起作用

<div id="boxes">
    <h1>EFFICIENT</h1>
    <p>Each part of the budget is spent programmatically with a performance objective</p>

    <h1>TAILORED</h1>
    <p> Each campaign is different and tailored to our clients needs</p>

    <h1>DEDICATED</h1>
    <p>Our team is fully dedicated to our client with a personalised approach and daily contacts</p>
</div>

和 CSS

#boxes {
  height: 300px;
  width: 100%;
  position: relative;
  padding-top: 50px;
  padding-bottom: 100px;
   }

#boxes h1 p {
float: left;
  }

最佳答案

试试这个:

      #boxes {
		  height: 90px;
		  border: 2px dotted #ee944d;
		  display: table-cell;
		  vertical-align: middle;
          padding:15px;
		}
		
	#boxes h1 p {
			float: left;
			text-align:left;
		}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>

<body>
	  <div id="boxes">
		<h1>EFFICIENT</h1>
		<p>Each part of the budget is spent programmatically with a performance objective</p>

		<h1>TAILORED</h1>
		<p> Each campaign is different and tailored to our clients needs</p>

		<h1>DEDICATED</h1>
		<p>Our team is fully dedicated to our client with a personalised approach and daily contacts</p>
	  </div>
</body>
</html>