How to align list of buttons in center horizontally?-CodePudding

I have the problem that whenever I want to align this they constantly overlap, how can I align them effectively.I have used everything possible that my head is about to explode I don't know why everything is gathered in the center in a heaped up way.This tells me to continue writing when I have nothing more to say, I don't understand the least of this, well I suppose that some tag in the css is wrong and is giving an error.

.boton5 {
    border: 12px solid #6b0d5f; /*anchura, estilo y color borde*/
    padding: 9px; /*espacio alrededor texto*/
    background-color: #6b0d5f; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-left: 11px;
   

    }


.boton1 {
    border: 2px solid #2e518b; /*anchura, estilo y color borde*/
    padding: 12px; /*espacio alrededor texto*/
    background-color: #2e518b; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-right: 10px;
    float: left;
    list-style-position: inside;
    


        
    }


.boton2 {
    border: 2px solid #2e518b; /*anchura, estilo y color borde*/
    padding: 12px; /*espacio alrededor texto*/
    background-color: #2e518b; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-right: 10px;
    float:left;
    list-style-position: inside;
    


        
    }


.boton3 {
    border: 2px solid #2e518b; /*anchura, estilo y color borde*/
    padding: 12px; /*espacio alrededor texto*/
    background-color: #2e518b; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-right: 10px;
    float: left;
    list-style-position: inside;




    
            
    }


.boton4 {
    border: 2px solid #2e518b; /*anchura, estilo y color borde*/
    padding: 12px; /*espacio alrededor texto*/
    background-color: #2e518b; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-right: 10px;
    float: left;
    list-style-position: inside;

        
                
    }


.ul {

    list-style:none;
    text-align: center
    
    
    
    

}

<!DOCTYPE html>
<html>
<head>
<title>MENUS | RECETAS DIET</title>
<link rel="icon" href="./imagenes/sombrero-de-cocinero.png">
<link rel="stylesheet" href="./css/style.css">

</head>
<body>
    <h1 align="center"><i>Recetas Diet</i></h1>
    <p align="center">Aquí encontrará recetas bajas calorías, propuestas por nuestro chef <br>
        Iván. Pruébelas en nuestros locales o prepárelas usted, y luego nos hace <br>
        llegar sus comentarios.    
    </p>
<br>
<br>
<br>
<h1 align="center"><font size="7" style="margin: 12px"<B>MENU</B></font></h1>
    <ul align="left" >
        <div>
     <li> <a  href="./menudeldia.html">Menu del Dia</a></li>
     </div>
      <div>
       <li> <a  href="./especialidades.html">Especialidades</a></li>
     </div>
      <div>
       <li> <a  href="comidaligera.html">Comida Ligera</a></li>
     </div>
      <div>
       <li> <a  href="variedades.html">Variedades</a></li>
     </div>
    
    </ul>
<br>
<br>
<br>
<br>
<br>
<br>
<div align="center">
    <a  href="./index.html">Volver</a>
</div>
    



</body>





</html>

CodePudding user response：

if im understanding your question correctly you want to fix your button style so that it is not heaped up in the center. i think you can add style on .ul class

a display: flex then put justify-content: center to put the button in the center. then change the boton2 - boton4 to boton 1 and delete the css acordingly because it is the same style. then you can add margin to boton1 let say margin : 10px

if you want it to be kind of responsive you can add flex-wrap: wrap on .ul class.

this is the code

.boton5 {
    border: 12px solid #6b0d5f; /*anchura, estilo y color borde*/
    padding: 9px; /*espacio alrededor texto*/
    background-color: #6b0d5f; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: "Helvetica", sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-left: 11px;
}

.boton1 {
    border: 2px solid #2e518b; /*anchura, estilo y color borde*/
    padding: 12px; /*espacio alrededor texto*/
    background-color: #2e518b; /*color botón*/
    color: #ffffff; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: "Helvetica", sans-serif; /*tipografía texto*/
    border-radius: 50px; /*bordes redondos*/
    margin-right: 10px;
    float: left;
    list-style-position: inside;
    margin: 10px;
}

.ul {
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<h1 align="center">
        <font size="7" style="margin: 12px" <B>MENU</B></font>
    </h1>
    <ul >
        <div>
            <li> <a  href="./menudeldia.html">Menu del Dia</a></li>
        </div>
        <div>
            <li> <a  href="./especialidades.html">Especialidades</a></li>
        </div>
        <div>
            <li> <a  href="comidaligera.html">Comida Ligera</a></li>
        </div>
        <div>
            <li> <a  href="variedades.html">Variedades</a></li>
        </div>
    </ul>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div align="center">
        <a  href="./index.html">Volver</a>
    </div>

I hope this helps.

CodePudding user response：

remove all the float: left (4 times) and add ul>div { display: inline-block; height: 3em;}:

display: inline-block; is to prevent these divs from taking the full width. height: 3em; adds a height large enough to prevent the vertical overlapping on smaller screens caused by the top/bottom padding of the a tags:

.boton5 {
  border: 12px solid #6b0d5f;
  /*anchura, estilo y color borde*/
  padding: 9px;
  /*espacio alrededor texto*/
  background-color: #6b0d5f;
  /*color botón*/
  color: #ffffff;
  /*color texto*/
  text-decoration: none;
  /*decoración texto*/
  text-transform: uppercase;
  /*capitalización texto*/
  font-family: 'Helvetica', sans-serif;
  /*tipografía texto*/
  border-radius: 50px;
  /*bordes redondos*/
  margin-left: 11px;
}

.boton1 {
  border: 2px solid #2e518b;
  /*anchura, estilo y color borde*/
  padding: 12px;
  /*espacio alrededor texto*/
  background-color: #2e518b;
  /*color botón*/
  color: #ffffff;
  /*color texto*/
  text-decoration: none;
  /*decoración texto*/
  text-transform: uppercase;
  /*capitalización texto*/
  font-family: 'Helvetica', sans-serif;
  /*tipografía texto*/
  border-radius: 50px;
  /*bordes redondos*/
  margin-right: 10px;
  list-style-position: inside;
}

.boton2 {
  border: 2px solid #2e518b;
  /*anchura, estilo y color borde*/
  padding: 12px;
  /*espacio alrededor texto*/
  background-color: #2e518b;
  /*color botón*/
  color: #ffffff;
  /*color texto*/
  text-decoration: none;
  /*decoración texto*/
  text-transform: uppercase;
  /*capitalización texto*/
  font-family: 'Helvetica', sans-serif;
  /*tipografía texto*/
  border-radius: 50px;
  /*bordes redondos*/
  margin-right: 10px;
  list-style-position: inside;
}

.boton3 {
  border: 2px solid #2e518b;
  /*anchura, estilo y color borde*/
  padding: 12px;
  /*espacio alrededor texto*/
  background-color: #2e518b;
  /*color botón*/
  color: #ffffff;
  /*color texto*/
  text-decoration: none;
  /*decoración texto*/
  text-transform: uppercase;
  /*capitalización texto*/
  font-family: 'Helvetica', sans-serif;
  /*tipografía texto*/
  border-radius: 50px;
  /*bordes redondos*/
  margin-right: 10px;
  list-style-position: inside;
}

.boton4 {
  border: 2px solid #2e518b;
  /*anchura, estilo y color borde*/
  padding: 12px;
  /*espacio alrededor texto*/
  background-color: #2e518b;
  /*color botón*/
  color: #ffffff;
  /*color texto*/
  text-decoration: none;
  /*decoración texto*/
  text-transform: uppercase;
  /*capitalización texto*/
  font-family: 'Helvetica', sans-serif;
  /*tipografía texto*/
  border-radius: 50px;
  /*bordes redondos*/
  margin-right: 10px;
  list-style-position: inside;
}

.ul {
  list-style: none;
  text-align: center
}

ul>div {
  display: inline-block;
  height: 3em;
}

<!DOCTYPE html>
<html>

<head>
  <title>MENUS | RECETAS DIET</title>
  <link rel="icon" href="./imagenes/sombrero-de-cocinero.png">
  <link rel="stylesheet" href="./css/style.css">

</head>

<body>
  <h1 align="center"><i>Recetas Diet</i></h1>
  <p align="center">Aquí encontrará recetas bajas calorías, propuestas por nuestro chef <br> Iván. Pruébelas en nuestros locales o prepárelas usted, y luego nos hace <br> llegar sus comentarios.
  </p>
  <br>
  <br>
  <br>
  <h1 align="center">
    <font size="7" style="margin: 12px" <B>MENU</B>
    </font>
  </h1>
  <ul align="left" >
    <div>
      <li> <a  href="./menudeldia.html">Menu del Dia</a></li>
    </div>
    <div>
      <li> <a  href="./especialidades.html">Especialidades</a></li>
    </div>
    <div>
      <li> <a  href="comidaligera.html">Comida Ligera</a></li>
    </div>
    <div>
      <li> <a  href="variedades.html">Variedades</a></li>
    </div>

  </ul>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div align="center">
    <a  href="./index.html">Volver</a>
  </div>




</body>





</html>