I'm using Bootstrap and I want to center an image but I don't know how to do it :/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="./img/logo.png" /></a>
</div>
So I have on my navbar an image and I want to center it I tried in CSS
.navbar-brand img{
width: 83px;
height: 57px;
margin-left : 50%;
}
The image doesn't move at all
There are loads of ways to do this, you can use
text-align:center;
to center elements or
margin-left:auto;
margin-right:auto;
This is really basic CSS, you should definitely check the documentation before.
Try this:
.navbar-brand img{
width: 83px;
height: 57px;
margin: 0 auto;
}
"margin-left:50%" centers the left boundary of your image. "margin: 0 auto;" says put and equal and maximum margin on both the right and left side of my element. if you need actual margins on the top/bottom you can use the 4-property method which might look like this:
margin: 10px auto 20px auto;
Related
I'm using a centered navbar-brand in Bootstrap 3, and when viewed on a phone sized screen, the text wraps, but the top line has a leading space, whereas the bottom does not, leading to their being misaligned.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="title-card">Testing Testing</a>
</div>
</div>
</nav>
In this example, "title-card" sets the font-size to 2em; and navbar-brand along with navbar-header were modified to be:
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {
float: none;
}
This produces the following output:
How would one go about aligning them?
Give a margin:0 and padding:0 to your #title-card.
#title-card {
margin: 0;
padding: 0;
}
I'm trying to build an html template from a psd design and I started mobile first doing pretty good so far with one issue.
I have this image which I positioned absolute in order to achive this effect. ( Image attached)
The thing is now that I got the image working the button for the collapse menu is not working anymore and neither the brand link. What I'm assuming is that the menu and brand are behind the image and that might cause the problem but I tried z-index to get it up front and is still the same..
I have a container for the image which has a 250px height because I wanted the image to fill this.. I got it to fill the container but it looked squeezed and I didn't know how to fix it..
HTML:
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image">
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
CSS:
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
position: absolute;
top:0;
left: 0;
padding-top: 60px;
min-width: 100%;
}
Since object-fit has really bad browser support, and as you have a given height, do like this, where you use a div instead.
The background-image can of course be set in the CSS as well, though sometimes the resource gets set in the markup, hence showing that as one way, often missed when replacing an img with a div.
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
height: 100%;
background-size: cover;
background-position: center;
}
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div>
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
Just add
object-fit: cover;
to the css for the image, and get rid of the
position: absolute;
top:0;
left: 0;
At the moment I have a navbar on my layout page which includes a logo. On this logo is a link to go to a website. However, the link only covers 10 pixels horizontally and 100 pixels vertically. I don't understand why.
HTML:
<div class="navbar-header">
<content class="col-md-1 col-md-offset-0" id="APTick">
<a href="http://www.google.co.uk/" class="navbar-brand" id="Logo">
</a>
</content>
</div>
CSS:
#APTick{
left: -15px;
background-color: #698277;
}
#Logo {
background-color: #698277;
width: 100px;
height: 72px;
background-image: url("Images/Logo/ap_tick.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
Can anybody help me move the positioning of the link space?
#Logo is an inline element.
If you want to setup size you need to display it as block element
#Logo {
display:block;
background-color: #698277;
width: 100px;
height: 72px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("Images/Logo/ap_tick.png");
}
<div class="navbar-header">
<content class="col-md-1 col-md-offset-0" id="APTick">
<a href="http://www.google.co.uk/" class="navbar-brand" id="Logo">
</a>
</content>
</div>
<a> element is inline element, so you cant set height on it, you can set line-height (not recomended) or make it display:inline-block or display:block
I have the following html:
<div class="container">
<a href="url here">
<div class="logo">
<h1>Name</h1>
</div>
</a>
</div>
and css:
.container {
width: 20%;
}
.logo {
background: url(images/ui-sprite.svg) no-repeat 0 0;
text-indent: -9999px;
height: 30px;
width: 150px;
margin: 25px 0;
}
The issue I have is with linking the logo (background image). At the moment the link area you can hover over is the full width of the container div, despite the fact that the logo class has a defined width. Any ideas here on best practice with linking of background images?
Thanks
Found this to be ultimately useful, and less markup too!
http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/
Vertical-align: middle; is not working.
From css file :
#header {height:150px; text-align: center; vertical-align: middle;}
<div id="header">
<img alt="" id="logo" src="images/logo.png" />
</div>
I would wrap the logo inside another div if it helps to align it to the center of the wrapper div.
do this
#header {display:table;}
#logo {display:table-cell; vertical-align:middle;}
Reference
You can do this only by padding, because other two ways line-height and vertical-align can't work on img....
Write
#logo
{
padding: 20px 0;
}
20px can be anything as you require.
Another option, although it has its limitations:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:150px; text-align: center;">
<img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
</div>
</body>
</html>
The negative margin should be half of the image height. So the following image will center in the above HTML:
This makes the centering dynamic if you happen to have a div that changes height. It can get a little tricky with the relative positioning though, because the image is taken out of the normal layout flow.
#logo {
position: absolute;
top: 50%;
margin-top: -75px;
}
Common method of doing vertical alignment. With top being 50% and margin-top being negative half the dimension of the parent div.
i like doing this:
<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
i dont know why it worked in my case... but by I could see it working by doing following:
div {padding-top: 0%;}