Astralpirate Astralpirate - 2 months ago 7
HTML Question

Can't width:100% and text-align:center

Here i try to align "Table for" text with class="table" by center, but nothing happens, i think it associated with elements' positions maybe.

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


Here is a codepen

I'm very beginner in front-end, so do not judge strictly.

Thanks.

Answer

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>