How to place a button center of a box

Question

I have a div, and I want to place a button center of that.

1-What code should I use for button? <p?> <span?> <button?> (I think is not good. I want a tag that doesn't have any border and clicking action)

2-How to place it center of the div?

(I want to give a background color to that button, and because of that when I used the background color took all of that line)

.box {
    width: 280px;
    height: 300px;
    background-color: rgb(221, 20, 20);}
    .button {
    background-color: rgba(57, 133, 57, 0.1);
    font-size: 13px;
 }

<div class="box">
<p class="button">Read More</p></div>

Daweed · Accepted Answer · 2021-04-08T07:26:38.063

If you don't want any click action or a border, use a div tag.

To center the .button, try using flexbox by adding these properties to the .box class:

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

.box {
  width: 280px;
  height: 300px;
  background-color: rgb(221, 20, 20);
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  background-color: rgba(57, 133, 57, 0.1);
  font-size: 13px;
}

<div class="box">
  <div class="button">Read More</div>
</div>

score 0 · Answer 2 · answered Apr 08 '21 at 07:15

You can use the flex to align the button in the middle of the box. If you don't want to use the button then I'll suggest you use div.

I added a little bit of styling to the div to make it more like a button.

.box {
  width: 280px;
  height: 300px;
  background-color: rgb(221, 20, 20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: rgba(57, 133, 57, 0.1);
  font-size: 13px;
  padding: 8px;
  border-radius: 3px;
}

<div class="box">
  <div class="button">Read More</div>
</div>

Working Fiddle

score 0 · Answer 3 · answered Apr 08 '21 at 07:26

If you have one line text, then you could do, otherwise use display: flex:

.box {
  width: 280px;
  height: 300px;
  background-color: rgb(221, 20, 20);
  line-height: 300px;/*should be the same as height*/
  text-align: center;
  border: 1px solid;      
}

.button {
  margin: auto auto;
}

 <div class="box">
    <p class="button">Read More</p></div>
  </div>

score 0 · Answer 4 · answered Apr 08 '21 at 07:40

1 - Use div if you don't want any border and click action 2- set display: grid; place-items: center; to the box, for placing the button in center of a div

.box {
  width: 280px;
  height: 300px;
  background-color: rgb(221, 20, 20);
  display: grid;
  place-items: center;
}
.button{
  background-color: tomato;
  padding: 5px;
}

<div class="box">
    <p class="button">Read More</p></div>
</div>

score 0 · Answer 5 · answered Apr 08 '21 at 08:03

For this approach, it is best to use flex to display button center in the box.

.box {
  width: 280px;
  height: 300px;
  background-color:green;
  display: flex;
  align-items:center;
}
.button{
  background-color: orange;
  padding: 0 5px;
  border-radius:0;
  border:0;
  -webkit-appearance:none;
  width:100%;
  max-width:150px;
  margin:0 auto;
  display:block;
  color:#fff;
  line-height:1;
  height:45px;
}

<div class="box">
    <button class="button">Read More</button>
</div>

How to place a button center of a box

5 Answers5