Image is not centering

Asked

Viewed 51 times

0

Guys, I’ve tried several ways, but the image is not centering. Follow below the code to better understand the problem: 

.logo2 {
     color: pink;
     position: absolute;
     margin: 0 auto !important;
     float: none !important;
    
     z-index: 1001;
     border-radius: 100%;
     text-align: center;
}
<div class = "container">
    <div class = "row">    
        <div class="col-md-12 logo2">
            <a href="#">
                <img src="https://i.stack.imgur.com/Go65r.png" class="img-responsive"/> 
            </a>
        </div>
    </div>
</div>

Here is the image:

html css bootstrap-3

  • Fixing CSS: . logo2 { color: pink; position: Absolute; margin: 0 auto ! Important; float: None ! Important; z-index: 1001; border-Radius: 100%; text-align: center; }

  • Renan can you explain why the question and the answer have the same CSS? It is not very logical to ask a question that is right and give the same answer. You can explain it better?

  • Sorry Jorge. It is pq I found that I had not put all the CSS code in the question. My mistake!

  • Renan no problem, when so can [Edit] the question and add or change what you need.

2 answers

0

If the class .logo2 is the attempt to center the image can delete it.

Add in your css the following style to the tag <img>

img{
 width:100%;
}

Note: If this image is an attempt to make a menu, you are sure to go the hard way.

0

Really the header needs to be in position: Absolute?

Apparently you can leave the background in a div and split the header into 3 columns by placing the first menu in column 1, the image centered in column 2 and the third menu in column 3.

Or you can go further and put everything in one ul using the :Nth-Child.

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.