2

Estoy buscando una forma de fijar el tamaño de un button, sin importar el tamaño del texto que tenga adentro, ya que van a ser números que no van a pasar de 3 cifras

Les dejo un ejemplo para que vean de lo que hablo (también en jsfiddle):

.table-mesas {
  float: left;
  width: 95.8%;
}

.table-mesas tr td {
  padding: 15px;
}

.butt-mesas {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 1px 1px 15px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 30px;
  padding: 30px 40px;
  background: #88dd77;
  border: solid #000000 1px;
  text-decoration: none;
  width: 100%;
}

.butt-mesas:hover {
  background: #9ae288;
  text-shadow: 1px 1px 15px #666666;
  text-decoration: none;
}
<table class="table-mesas">
  <tr>
    <td><button class="butt-mesas">1</button></td>
    <td><button class="butt-mesas">2</button></td>
    <td><button class="butt-mesas">3</button></td>
    <td><button class="butt-mesas">4</button></td>
    <td><button class="butt-mesas">5</button></td>
  </tr>
  <tr>
    <td><button class="butt-mesas">100</button></td>
    <td><button class="butt-mesas">2</button></td>
    <td><button class="butt-mesas">3</button></td>
    <td><button class="butt-mesas">4</button></td>
    <td><button class="butt-mesas">5</button></td>
  </tr>
  <tr>
    <td><button class="butt-mesas">1</button></td>
    <td><button class="butt-mesas">2</button></td>
    <td><button class="butt-mesas">3</button></td>
    <td><button class="butt-mesas">4</button></td>
    <td><button class="butt-mesas">5</button></td>
  </tr>
  <tr>
    <td><button class="butt-mesas">1</button></td>
    <td><button class="butt-mesas">2</button></td>
    <td><button class="butt-mesas">3</button></td>
    <td><button class="butt-mesas">4</button></td>
    <td><button class="butt-mesas">5</button></td>
  </tr>
  <tr>
    <td><button class="butt-mesas">1</button></td>
    <td><button class="butt-mesas">2</button></td>
    <td><button class="butt-mesas">3</button></td>
    <td><button class="butt-mesas">4</button></td>
    <td><button class="butt-mesas">5</button></td>
  </tr>
</table>

1 respuesta 1

3

Puedes probar estableciendo una anchura y altura fija, y un "line-height" igual a la altura que le hayas puesto, para que el texto aparezca en el centro verticalmente. Además, un text-align: center, para centrar el texto horizontalmente.

button {
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  height: 50px;
}
<button>1</button>
<button>10</button>
<button>100</button>

Espero haberte ayudado. Un saludo.

2
  • Las unidades px, puedes reemplazarlas por em o rem. O calculas el ancho y alto y divides por el número de filas y columnas menos el espacio entre ellos haciendo con CSS: width|height: calc((100% / 5) - 30px); Commented el 3 jun. 2017 a las 19:13
  • Se lo que comentas, pero solo he dejado un ejemplo funcional para que le haga el apaño. Commented el 4 jun. 2017 a las 8:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.