Centering element with an image inside a div

Question

How do I force my <a> element with an image appear in center of my div? And should I try to center an a element first, so it work out?

<div class="col-md-6 logo">
<a class="navbar-brand" href="/index.html">
<img src="#">
</a>
</div>

Please include a summary of the work you've done so far to solve the problem, and a description of the difficulty you are having solving it. — Sean, May 20 '16 at 18:37

score 0 · Answer 1 · answered May 20 '16 at 18:37

0

try style="text-align:center" :

<div class="col-md-6 logo" style="text-align:center">
<a class="navbar-brand" href="/index.html">
<img src="#">
</a>
</div>

answered May 20 '16 at 18:37

bob

He might also need to style the img `display:inline-block;` – cssyphus May 20 '16 at 18:42
1

img are by default inline – Sofiene Djebali May 20 '16 at 18:47

score 0 · Answer 2 · answered May 20 '16 at 18:46

0

put your img a class like

In css

img.example { margin : auto; }

answered May 20 '16 at 18:46

Akshay Shrivastav

`margin : auto;` won't have an effect, as long as the `img` has the default value `inline` for `display`. Beside that `margin : auto;` requires a `block` display and the `width` has to be set. – t.niese May 20 '16 at 18:48

score 0 · Answer 3 · answered May 25 '16 at 13:32

0

Problem solved, navbar-brand has float:right by default. so i shanged it to :none; and text align: center;

answered May 25 '16 at 13:32

bibabup0120

3 Answers3