Question

我在这里非常新，所以请提前为这个问题道歉......

我试图创建3个文本块但是按照它们对齐它们我不想创建按钮，只是文本块

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

和CSS

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

#boxes h1 p {
float: left;
  }

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

最简洁的方法：

#boxes {
  display: flex;
  align-items: center;
  height: 300px;
}

#box {
  padding: 8px;
}

<div id="boxes">
  <div id="box">
    <h1>EFFICIENT</h1>
    <p>Each part of the budget is spent programmatically with a performance objective</p>
  </div>

  <div id="box">
    <h1>TAILORED</h1>
    <p> Each campaign is different and tailored to our clients needs</p>
  </div>

  <div id="box">
    <h1>DEDICATED</h1>
    <p>Our team is fully dedicated to our client with a personalised approach and daily contacts</p>
  </div>
</div>

Answer 3

在盒子的样式中添加显示：内联......

#boxes{
display: inline;
}

如何水平对齐内容

和CSS

3 个答案: