Making a navigation logo position in center

Question

I have this code inside a grid.

<div class="nav__logo nav__logo--height">  
  <a href="http://localhost/step-asia/">
    <img src="assets/image/logo-1.png" alt="Step Asia Logo">
  </a>
</div>

and this is the css style

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
}
.nav__logo a {
  display: table;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo--height {
  height: 19px;
  display: inline-block;
  width: 100%;
}
.nav__logo img {
  margin: 0 auto;
}

I tried using position property but its not the solution, there's a problem using it when resizing the screen. text-align doesn't works also since it's an image.

The DIV above is inside a grid column. Can you give an idea. Revising the code is acceptable, just need idea.

Possible duplicate of [Center image using text-align center?](http://stackoverflow.com/questions/7055393/center-image-using-text-align-center) — Sᴀᴍ Onᴇᴌᴀ, Oct 17 '16 at 03:50
No. The link you give for possible duplicate, is not same with the problem I have. — Fil, Oct 17 '16 at 03:53

score 2 · Accepted Answer · answered Oct 17 '16 at 04:00

2

use flex layout for container element

.nav__logo{
   border: 1px solid #f7b5b5;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items:center;
   align-content:  center;
}
.nav__logo--height {
  height: 19px;
  width: 100%;
}
.nav__logo>a {
  display: block;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo>img {
  display: block;
}

answered Oct 17 '16 at 04:00

Sajan

813
9
14

@Fil it is used for responsive and centralized elements – Sajan Oct 17 '16 at 11:24

Asifuzzaman Redoy · Answer 2 · 2016-10-17T04:09:08.210

Hello hope it helps use the below code I used css justify-content: center; to move the navigation logo center

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  }

<html>
<body>
<div class="nav__logo nav__logo--height">  
  <a href="http://localhost/step-asia/">
    <img src="http://quesa.sourceforge.net/other/files/logo_small.jpg" alt="Step Asia Logo">
  </a>
</div>
  </body
</html>

score 0 · Answer 3 · answered Oct 17 '16 at 04:00

0

The issue is caused by .nav__logo a { display: table;

you want to change that to display: inline; or display:block; or display: inline-block

pretty much "table" is the only value that wont do what you want it to do.

answered Oct 17 '16 at 04:00

Todd Resudek

123
5

score 0 · Answer 4 · answered Oct 17 '16 at 04:03

0

Add a text-align:center in your a tag so that the image will be in center.

.nav__logo a {
  display: table;
  color: black;
  text-transform: capitalize;
  text-decoration: none;
  text-align:center;
}

Here is an example Jsfiddle

answered Oct 17 '16 at 04:03

user3771102

558
2
8
27

score 0 · Answer 5 · answered Oct 17 '16 at 04:12

To center the image remove display: table; from a tag or make it display: inline-block;

.nav__logo {
  border: 1px solid #f7b5b5;
  text-align: center;
}
.nav__logo a {
  color: black;
  text-transform: capitalize;
  text-decoration: none;
}
.nav__logo--height {
  height: 19px;
  display: inline-block;
  width: 100%;
}
.nav__logo img {
  margin: 0 auto;

score 0 · Answer 6 · answered Oct 17 '16 at 04:56

<html>
<head>
<style>
.nav__logo {
border: 1px solid #f7b5b5;  
position: absolute;
top: calc(50% - 96px);/*image height*/
left: calc(50% - 284px);/*image width*/
}
</style>
</head>
<body>
<div class="nav__logo nav__logo--height">  
<a href="http://localhost/step-asia/">
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" alt="Step Asia Logo">
</a>
</div>
</body>
</html>

Making a navigation logo position in center

6 Answers6