html - 不能宽度 :100% and text-align:center

Question

在这里，我尝试将“Table for”文本与 class="table"居中对齐，但没有任何反应，我认为这可能与元素的位置有关。

.table{
      position:relative;
      margin:5px;
      width:100%;
      text-align:center;
}

这是一个codepen

我是前端初学者，所以不要严格判断。

Answer 1

body{
  background-color: grey;
}

.menu{
  width:300px;
  height:400px;
  background-color:white;
  position:relative;
}

.lupe{
  float:right;
}

.arrow{
  float:left;
  margin-bottom:157px;
}

.ball{
  position:relative;
  left:10px;
  margin:20px;
}

.table{
  position:relative;
  margin:5px;
  width:100%;
  text-align:center;
}

<div class='menu'>
  <button class='arrow'><img src=http://iconspot.ru/files/216453.png width=20px height=5%></button>
  <button class='lupe'><img src=http://s1.iconbird.com/ico/2013/9/452/w512h5121380477032search.png height=32px width=20px></button>
  <div class='table'>
  <img class='ball' src=http://i.imgur.com/f3axIAv.png>
  <a >Table for</a>
  </div>
</div>