Doubt with image positioning

Asked

Viewed 150 times

1

I have an image for the logo, I want it to always be positioned in the center of the screen for all devices.

I’m using the .

CSS

.relative{
    position: relative;
    left: 40px;
}

HTML

<div class="relative">
    <img src="~/Content/images/Checkmark.fw.png" alt="logo" class="img-circle">
</div>

Thanks

5 answers

3

If case wishes that whenever the class .relative positioned in the center, could use the code below::

CSS

.relative {
 margin:0 auto;
 float:none;
}
  • This answer solves your question about positioning your image?

2

It has the auxiliary bootstrap classes that do this, in this case the center-block.

Bootstrap css images

To center images that use the . img-Responsive class, use . center-block instead of . text-center. See the auxiliary classes section for more details on using . center-block.

The center-block would be nothing more than:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
  • Very interesting, I was unaware of this class. I always used the text-center, even though I knew it was not ideal. Thank you

1

if you want an object to stay always in the center of the screen, regardless of other elements, then you must use position: fixed, anchor it at the ends of the screen, use a fixed size and margem: auto:

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}
<div class="centro"></div>

in an amending form to margin: auto, you can use a transform: traslate(-50%, -50%)to move the element.

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
<div class="centro"></div>

0

Another option would be:

.relative{ 
    display: table;
    margin: 0 auto;
}

-1

Dude, you need to set her size first. By setting the size, you can apply the margin: auto; that it will be centralized.

.relative {
    width: 20%;
    margin: auto;
}

Browser other questions tagged

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