正确对齐Divs - HTML / CSS

Question

＆＃13;

＆＃13;

#left {
  float: left;
  width: 15%;
  overflow: hidden;
}

#right {
  float: left;
  width: 60%;
  overflow: hidden;
}

#cen {
  display: inline-block;
  width: 5%;
  overflow: hidden;
}

#container {
  width: 100%;
  text-align: center;
}

＆＃13;

<div id="container">
  <h1>
    <div align="center" id="cen">+</div>
  </h1>
  <h1>
    <div align="center" class="Area" id="left">1</div>
  </h1>
  <h1>
    <div align="center" class="Phone" id="right">650000</div>
  </h1><br>
</div>

＆＃13;

＆＃13;

＆＃13;

灰色区域是我的容器DIV Top是我的 底部是我想要的。

我没有做任何事情，或者将一个div推到下一行。令我非常沮丧的是我要打碎我的电脑

Answer 1

为什么不简单地使用span和一些余量：

h1 {
  text-align: center;
}

span {
  margin: 10px;
}

<h1><span>+</span><span>1</span><span>650000000</span></h1>

然后您可以通过添加一些类

来更改单个边距