CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
flaskehals
flaskehals

Reputation: 107

This image won't center in it's bootstrap column

I want a small image on the top of the page, the logo to be precise. I have set up the bootstrap columns so that the two columns the image will span is center, but the image itself won't center within the two columns it spans. The Dreamweaver live view confirms this.

code:

<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">

<img src="Img/Logo.png" id="logo2">

</div>
</div>
</div>


</body>
</html>

CSS:

body {
background-color:#DEE7E7;

}


#logo2 {
position:absolute;
width:30%
}

The #logo2 id is mostly just my attempt at centering it, and removing it does not fix the problem. I have looked at the bootstrap documentation and can't figure it out.

Upvotes: 0

Views: 5080

Answers (2)

Max
Max

Reputation: 1805

#logo2 {
    display: table;
    margin: 0 auto;
}

Upvotes: 0

BurpmanJunior
BurpmanJunior

Reputation: 1008

You can either apply a text-align: center; to the image's container using Bootstrap's text-center class. E.g:

<div class="col-sm-2 col-sm-offset-5 text-center">
  <img src="Img/Logo.png" id="logo2">
</div>

Read more here: http://getbootstrap.com/css/#type-alignment

Or you can style logo2 to display as a block with auto margins. E.g:

#logo2{
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

Upvotes: 5

Related Questions