我的按钮居中，即使我输入text-align: left；

Question

我为一个计算机科学项目做了一个小小的启动。对于这个项目，我们必须建立一个常规的网站与HTML，CSS和如果需要，javascript。我的导航器菜单是从w3-校得到的，但是在把按钮放在顶部容器而不是标题之后，它突然居中而不是显示在左边。

我从顶部容器中删除了text-align: center;，并将其放入button { text-align: left; }

没有起作用

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
    <div id="main">
        <section class="top-container">
            <h2>Just some bullshit here</h2>
            <button 
                id="openNav" 
                class="w3-button w3-teal w3-xlarge" 
                onclick="w3_open()">&#9776;
            </button>
        </section>

CSS

.top-container {
   background-color: #f1f1f1;
   padding: 30px;
}

button{
  text-align: left
}

我希望按钮在左边，而不是在中间。

(这里有一个指向整个代码https://jsfiddle.net/Ellefien12/qg6thu5v/1/的链接，我不知道为什么，但它在那里工作，但当我在NetBeans 11中使用它时，它不工作)

下面是它在firefox中的外观

​

​

Answer 1

把你的按钮放在div里面

<div class="wrapper">
    <button id="openNav" class="w3-button w3-teal w3-xlarge" 
onclick="w3_open()">&#9776;</button>
</div>

然后定位元素

.wrapper {
    text-align: left;
}

#openNav {
    position: absolute;
    top: 50%;
}