I have an image for the logo, I want it to always be positioned in the center of the screen for all the devices.
I'm using the bootstrap .
CSS
.relative{
position: relative;
left: 40px;
}
HTML
<div class="relative">
<img src="~/Content/images/Checkmark.fw.png" alt="logo" class="img-circle">
</div>
Thank you
If you want, whenever the .relative class is placed in the center, you could use the following code:
CSS
.relative {
margin:0 auto;
float:none;
}
It has the bootstrap helper classes that do this, in this case the center-block .
To center images that use the .img-responsive class, use .center-block, instead of .text-center. See the help 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;
}
If you want an object to always be in the center of the screen, regardless of the other elements, then you should 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> If it forms alterative to margin: auto , you can use 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>Another option would be:
.relative{
display: table;
margin: 0 auto;
}
Dude, you need to set her size first. By setting the size, you can apply the margin: auto; that it will be centered.
.relative {
width: 20%;
margin: auto;
}