CSS how to center this div

Question

Could someone try and help me center this div? Help would be appreciated!

.navbar a {
 text-decoration: none;
 color: black;
}

.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand"> 
  <span>O</span>ne<span>D</span>ata</a>
</div>

In side content of entire div with content wanna set in center? — Hanif, Oct 01 '18 at 02:39
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — , Oct 01 '18 at 03:19

score 2 · Answer 1 · answered Oct 01 '18 at 02:35

Simply apply text-align: center to .navbar:

.navbar a {
  text-decoration: none;
  color: black;
}

.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

.navbar {
  text-align: center;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand">
    <span>O</span>ne<span>D</span>ata</a>
</div>

score 0 · Answer 2 · answered Oct 01 '18 at 02:39

in class .navbar a.navbar-brand use text-align: center; & display: block;

     .navbar a {
        text-decoration: none;
        color: black;
       
      }

      .navbar a.navbar-brand {
        height: inherit;
        line-height: inherit;
        padding-top: 25px;
        font-size: 32px;
        text-transform: uppercase;
        font-weight: 400;
        letter-spacing: 2px;
        text-align: center;
        display: block;
      }

      .navbar a.navbar-brand span {
        font-size: 38px;
        font-weight: 700;
      }

<div class="navbar">
    <a href="#!/home" class="navbar-brand"> 
    <span>O</span>ne<span>D</span>ata</a>
 </div>

score 0 · Answer 3 · answered Oct 01 '18 at 02:41

Just add this class to your CSS file:

.navbar {
    text-align: center;
    display: block;
}

or add this style to your div element:

style="text-align:center; display: block;"

<div class="navbar" style="text-align:center; display: block;">
    <a href="#!/home" class="navbar-brand"> 
    <span>O</span>ne<span>D</span>ata</a>
</div>

Hope it helps.

score 0 · Answer 4 · answered Oct 01 '18 at 03:27

0

you can add this

 .navbar{
     text-align: center;
   }

answered Oct 01 '18 at 03:27

セアンデエ

214
2
11

It might be even more helpful to include an explanation of what your code does, and why it answers the question. Posting just code can sometimes be unclear. – Harsha Biyani Oct 01 '18 at 06:32

score 0 · Answer 5 · answered Oct 01 '18 at 05:20

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar a {
 text-decoration: none;
 color: #000000;
}
.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand"> 
  <span>O</span>ne<span>D</span>ata</a>
</div>

CSS how to center this div

5 Answers5