so i have a table and i want the buttons side by side instead of stacked Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/

i tried

display: flex; align-items: center; justify-content: center;

but that just does this

ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website

@charset "UTF-8";
button{
 display:inline-block;
 padding:0.5em 3em;
 border:0.16em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 text-transform:uppercase;
 font-family:'Roboto',sans-serif;
 font-weight:400;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.15s;
  
}
button:hover{
 color:#DDDDDD;
 border-color:#DDDDDD;
}
button:active{
 color:#BBBBBB;
 border-color:#BBBBBB;
}
@media all and (max-width:30em){
 button{
  display:block;
  margin:0.4em auto;
 }
}

<div style="text-align:center">
    
    <button id="wildlife">EG&nbsp;</button><br>
<button id="landscape">EG&nbsp;</button><br>
<button id="ocean">EG&nbsp;</button>
    
</div>

<div >
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>

<div >
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>


<div >
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
    
    <font face="sans-serif" color="#017bf5" size="5" align="center">
    <h1>###&nbsp;</h1>
    </font>
    <font face="sans-serif" color="#444" size="3" align="center">
    <h1>###</h1>
</font>

    
</body>

CodePudding user response：

In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line. Solution: Remove <br> tags after button elements.

CodePudding user response：

A div box around the buttons with display: flex; and flex-direction: row; Should work