Html 放置两个按钮

我有一个区域，我想在里面添加两个按钮。左边的按钮是“星期日”，右边的按钮是“杂项”。 我想要的是均匀地放置两个按钮。 因为两个按钮大小相同，所以我给它们分配了相同的类。 守则：

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>

星期日
麦克风

所以我认为星期天自然在左边。我只想添加一些规则来分隔两个按钮，例如左键填充。。。 然而，结果是“星期天”在右边。为什么？ 请访问我的CSS

---

谢谢。

关于你的CSS，按钮

和
上的
位置：absolute
把事情搞砸了。将这两个实例都去掉，您或多或少会得到您期望的结果（左侧是星期日，右侧是麦克风，左侧有明显的填充，等等）。
这是因为在button类中，您的左边距为120，但您将麦克风id的左边距属性重置为0

编辑
Cleaner fiddle做你想做的事：
按钮的
位置设置为
绝对
。把这个从.button类和ID（#Sunday和#mic）中去掉

此外，我建议去掉按钮的边距和填充，使用display:inline块而不是inline。不能在内联元素中指定宽度或高度，并且块元素通常不能在同一水平线上渲染，除非进行额外的微调

如果您必须将开关宽度设置为456px，则可以将按钮设置为228px（宽度的1/2）。html中按钮div之间的换行符在按钮之间添加了一个空格，因此应该将第二个div紧跟在第一个div之后

这是一个更易于管理的版本，您正试图这样做

编辑：如果要垂直对齐按钮/文本，可以先将按钮设置为
位置：相对
，然后设置
顶部：px
。这将使按钮向下移动。然后，您可以在按钮上添加
padding top
，使文本垂直居中显示。这里可以看到一个较新的示例：

编辑#2：使周围div中的文本垂直居中的更简单方法是使
行高度
等于div高度。这将自动使文本居中。它也比填充顶部更容易操作，因为它不会影响按钮div的高度。上次更新的小提琴：
我根据您的建议在上更新了它。如何使两个按钮垂直均匀对齐？你说得对。但是如何使文本在中间垂直？