How to center a button while creating it responsive with CSS

user_13284348 0
Viewed 973

I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.

enter image description here

.image {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  margin-top: 40px;
  margin-left: 50px;
}

.image img {
  cursor: pointer;
}

.image img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image #mother img:hover {
  border: solid 2px #1e88e5;
  border-radius: 2px;
}

.image img {
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 10px;
  margin-left: 30%;
}

.button{
  width: 80px;
  height: 40px;
  text-align: center;
  margin: auto;
  display: flex;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}

.button:hover{
   background-color: #242424;
}
.button:active{
   background-color: #121212;
}

.button > span{
  color: #eeeeee;
  text-align: center;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Good Cop, Bad Cop</title>
  <style>
    .view-image img {
      margin-left: 90px;
    }
  </style>
  <link rel="stylesheet" href="../CSS/landing.css" />
  <link rel="stylesheet" href="../CSS/coach_selection.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />

</head>

<body>
  <nav class="navbar navbar-custom">
    <div class="container-fluid">
      <a class="navbar-brand" href="">
        <img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
      </a>

      <a href="settings.html">
        <ul class="navbar-nav">
          <img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
        </ul>
      </a>
    </div>
  </nav>
  <div class="image">
    <div>
      <button type="button" id="dog-button" class="btn btn-light">
        <img src="../images/dog.png" id="dog" alt="dog">
      </button>
    </div>
    <div>
      <button type="button" id="mother-button" class="btn btn-light">
        <img src="../images/mother.png" id="mother" alt="mother">
      </button>
    </div>
    <div>
      <button type="button" id="soldier-button" class="btn btn-light">
        <img src="../images/military.png" id="soldier" alt="soldier">
      </button>
    </div>
    <div>
      <button type="button" id="teacher-button" class="btn btn-light">
        <img src="../images/teacher.png" id="teacher" alt="teacher">
      </button>
    </div>
    <div class="button" id="button-confirm">
      <span>Confirm</span>
    </div>
    <div class="view-image" style="display:none;">
      <img src="" width="150" height="150" />
      <div class="button" id="button-other"><span>Other</span></div>
    </div>
  </div>
  <div class="fixed-bottom">
    <div class="navbar navbar-custom">
      <div class="container-fluid">
        <div id="grid">
          <div class="bot-nav-img">
            <a href="Journal/journal_main.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
            </a>
          </div>
          <div class="bot-nav-img">
            <a href="landing.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
            </a>
          </div>
          <div class="bot-nav-img">
            <a href="goals.html">
              <img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
            </a>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

center button textbox css html
3 Answers

The quickest and easiest way to create a perfect centre alignment in css is with flexbox.

The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;

For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;

The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.

.button {
  width: 80px;
  height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(43, 43, 219);  
  cursor: pointer;
  border-radius: 2px;
}
user_118140220

Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like

.button { 
  margin: 10px auto 0px;
}

Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/

user_122138960

This solution is working for me.

.button {
    display : flex;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0px auto 0px;
}
user_136152500
Related