How to center text inside a div

Question

I am trying to center the text horizontally in the middle of the orange div container. Here is the styling and the actual code.

.header{
            background: #ff6400;
            height:40px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .phone{
            color: white; 
            font-size: 20px; 
            padding: 9px 0 0 125px;
            display: inline-block;
        }
        .adres{
            display: inline-block;
            color: white; 
            font-size: 20px;
            width: 50%;
            margin: 0 auto;
        }

<div class="header">
    <div class="phone">&#9742; 052 824 134</div>
    <div class="adres">&#10031; бул. Княз Борис I, No 115 - Дворец на Културата и Спорта</div>
</div>

How to center text in a div questions shouldn't get new answer anymore guys. This question has already been answered billions of times. @Kristiyan Rusev : try searching this forum before posting a question. It is very likely that such a basic CSS issue is answered already around here. Welcome to this forum by the way! — Luckyfella, Dec 19 '22 at 19:15

score 1 · Accepted Answer · answered Dec 19 '22 at 18:55

1

align: center;

.adres{
        display: inline-block;
        text-align: center;
        color: white; 
        font-size: 20px;
        width: 50%;
        margin: 0 auto;
    }

answered Dec 19 '22 at 18:55

Severin.Hersche

120
6

Thank you, this aligned the text just the way I wanted it to look like. – Kristiyan Rusev Dec 19 '22 at 19:13

score 0 · Answer 2 · answered Dec 19 '22 at 18:54

0

Add text-align: center; to .header and remove the left padding from .phone.

answered Dec 19 '22 at 18:54

ninadepina

661
2
12

score 0 · Answer 3 · answered Dec 19 '22 at 18:54

you can use flex box

like this :

.header{
            background: #ff6400;
            height:80px;
            box-sizing: border-box;
            margin: 0 auto;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
        }
        .phone{
            color: white; 
            font-size: 20px; 
            padding: 9px 0 0 125px;
            display: inline-block;
        }
        .adres{
            display: inline-block;
            color: white; 
            font-size: 20px;
            width: 50%;
            margin: 0 auto;
        }

<div class="header">
    <div class="phone">&#9742; 052 824 134</div>
    <div class="adres">&#10031; бул. Княз Борис I, No 115 - Дворец на Културата и Спорта</div>
</div>

score 0 · Answer 4 · answered Dec 19 '22 at 18:55

0

.header{
  background: #ff6400;
  height:40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  }

answered Dec 19 '22 at 18:55

Sargis Abovyan

81
1
4

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Vickel Dec 19 '22 at 22:11

How to center text inside a div

4 Answers4