Centering div element

Question

How can I center the description in the main block? I tried to use {margin: auto} or {margin-left:auto, margin-right:auto}, but it does not helps.

<main class="row">
  <div class="description">A little description</div>
</main>

Does this answer your question? [How to horizontally center a
](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Osman Durdag, Oct 06 '20 at 06:17

score 0 · Answer 1 · answered Oct 06 '20 at 05:23

0

This should help you:

.description {
display: flex;
align-items: center;
justify-content:    
}

answered Oct 06 '20 at 05:23

Oleg Gribanov

31
8

justify-content needs some kind of value, was this a mistake? – corn on the cob Oct 06 '20 at 06:56

score 0 · Answer 2 · answered Oct 06 '20 at 05:31

0

You need to tell the description-<div> to be inline-block, otherwise it will stay there. Try it with this entry in your stylesheet:

.description {
  display: inline-block;
  text-align: center;
}

answered Oct 06 '20 at 05:31

gadget.muc

1

score 0 · Answer 3 · answered Oct 06 '20 at 06:10

If you are using Bootstrap 4 then use mx auto.

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    </head>
    <body>
<main class="row">
  <div class="description mx-auto">A little description</div>
</main>
</body>

Otherwise

.description {
  text-align:center;
}

 <main class="row">
      <div class="description">A little description</div>
    </main>

Centering div element

3 Answers3