How to center some text in a rectangle in CSS?

Question

I am trying to center the text in the rectangle but I am not successful. I want to write the code for every kind of fonts.

here is my code snippet

.button {
display: block;
color: rgb(181, 1, 88);
background-color: rgb(248, 224, 237);
width: 232px;
height: 200px;
border-radius: 8px;
margin-left: 368px;
box-shadow: 5px 4px rgb(181, 1, 88);
text-align: center;
}

Do you mean you want the text centered horizontally and vertically in the rectangle? — showdev, Jun 27 '19 at 00:40
The element is set to `display:block`, so it should act similarly. — showdev, Jun 27 '19 at 18:20

score 3 · Answer 1 · answered Jun 27 '19 at 00:34

You can use css flex layout.

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(181, 1, 88);
  background-color: rgb(248, 224, 237);
  width: 232px;
  height: 200px;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 5px 4px rgb(181, 1, 88);
  text-align: center;
}

<a class="button" href="#">Some<br>text</a>

Claire · Answer 2 · 2019-06-27T03:48:34.083

0

In your case the simplest solution is to replace your defined height with padding, like so:

.button {
display: block;
color: rgb(181, 1, 88);
background-color: rgb(248, 224, 237);
width: 232px;
// height: 200px; ——replace with padding below
padding: 100px 0;
border-radius: 8px;
margin-left: 368px;
box-shadow: 5px 4px rgb(181, 1, 88);
text-align: center;
}

Here is an updated fiddle:

https://jsfiddle.net/54jqrfuo/

edited Jun 27 '19 at 03:48

answered Jun 27 '19 at 01:00

Claire

3,146
6
22
37

This is incorrect. When I replace height: 200px with padding: 100px top and bottom, the real height will be different (more than 200px) because the text has some height. – Milen Grigorov Jun 27 '19 at 11:34
@MilenGrigorov this is not incorrect at all. Your question doesn’t state that you need to maintain a 200px height. It just says you need to center the text in the button. If you need it to be 200px in height then subtract the height of the text from the padding. Easy. – Claire Jun 27 '19 at 15:18

score 0 · Answer 3 · answered Jun 27 '19 at 01:05

One way to achieve this is to wrap the text in a <p> tag and align with top: 50% and transform.

<a class="button" href="#"><p>Some<br>text</p></a>

.button {
    color: rgb(181, 1, 88);
    background-color: rgb(248, 224, 237);
    width: 232px;
    height: 200px;
    border-radius: 8px;
    margin-left: 368px;
    box-shadow: 5px 4px rgb(181, 1, 88);
    text-align: center;
}
.button p{
    position: relative;
    top: 50%; #positions 50% from top of parent.
    transform: translateY(-50%); #positions -50% in relation to itself
}

score 0 · Answer 4 · answered Jun 27 '19 at 03:36

You can use the following 3-properties for aligning an element to center.

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

So here is the full source code for positioning the element to center.

.button {
   display: flex;
   justify-content: center;
   align-items: center;
   color: rgb(181, 1, 88);
   background-color: rgb(248, 224, 237);
   width: 232px;
   height: 200px;
   border-radius: 8px;
   margin-left: 368px;
   box-shadow: 5px 4px rgb(181, 1, 88);
   text-align: center;
 }

<a class="button" href="#">Some<br>text</a>

score -1 · Answer 5 · answered Jun 27 '19 at 07:53

Try This

<div class="button">
   <a href="#">Some<br>text</a>
</div>

.button {
        display: table;
        color: rgb(181, 1, 88);
        background-color: rgb(248, 224, 237);
        width: 232px;
        height: 200px;
        border-radius: 8px;
        margin-left: 368px;
        box-shadow: 5px 4px rgb(181, 1, 88);
        text-align: center;
        vertical-align: middle;
     }
     .button a{
        display: table-cell;
        vertical-align: middle;
     }

How to center some text in a rectangle in CSS?

5 Answers5