I have an image as a navigation bar that I wanted centered on the page. It has a fixed position which may be making it so it can't be centered.
HTML & CSS:
.navbar {
display: block;
position: fixed;
top: 0;
text-align: center;
}
<img src="Images/NavBar.png" alt="" class="navbar" usemap="#navbar-map" />
I have tried center tags, text-align: center, and left: auto; right: auto. None work. What's going wrong?
try this with position fixed.
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
You can set
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<img src="https://i.pinimg.com/originals/44/cd/cb/44cdcb484a8febd81c1784cb11a96c7b.jpg" alt="" class="navbar" usemap="#navbar-map" />
Just place the image inside a container, adding the class directly on the image tag is not a very good idea for future stuff.
.navbar {
display: block;
top: 0;
text-align: center;
margin: 0 auto;
}
.navbar-container {
position: fixed;
left: 0;
right: 0;
background: #ddd;
height: 300px;
}
<div class="navbar-container">
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
</div>
Or use the transformation
.navbar {
left: 50%;
transform: translateX(-50%);
position: fixed;
}
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
Related
I've tried everything, but nothing works! transform: translate (50%); seems to work, but it doesn't align it to the exact center. I even tried left: 50%; with it.
I've spent a week figuring it out, and I still can't.
The image I'm trying to align is a logo with the dimensions 660 X 150.
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
<style>
.logo {
position: fixed;
width: 35%;
top: -5px;
height: auto;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
EDIT: No, I want to align the logo to the center of the page. The rectangle div is the background color for the logo.
Also, none of those answers worked. :(
Try this:-
Use display: flex; justify-content: center; element to align img at center.
<div id="rectangle" style="display: flex; justify-content: center;">
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
position: relative;
width: 35%;
top: -5px;
height: auto;
text-align:center;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
Instead of using an <img> tag, try using a div and give that image as backgorund with
background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;
use this
<div id="rectangle"><img class="logo" src="Untitled.png"></div>
and for style
<style>
.logo {
margin-right:auto;
margin-left:auto;
}
#rectangle {
width: 100%;
height:100px;
vertical-align:center;
}
</style>
try it
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
width: 35%;
height: 150px;
}
#rectangle {
width: 100%;
height: 150px;
background: #101010;
text-align: center;
}
</style>
Are you looking for something like this ?
And yes, avoid using center tag as its deprecated in HTML5.
.center-my-content {
height: 500px;
width: 500px;
position: relative;
border: 1px solid #000;
margin: 0 auto;
}
.logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id="rectangle" class="center-my-content">
<img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>
Remove the position: fixed; from the img.
.logo {
height: auto;
width: 35%;
display: block;
margin: 0 auto;
top: -5px;
}
#rectangle {
position: fixed;
width: 100%;
height: 100px;
background: #101010;
top: 0;
}
<div id="rectangle">
<img class="logo" src="image.png"></div>
How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.
to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1
#headerImage {
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
#greeting{
padding: 0px;
position: relative;
}
#greetin-h1{
text-align: center;
color:#000;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 9999;
}
<div id="greeting">
<img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
Why not using the image as background?
html, body{
width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#greetin-h1{
text-align: center;
color:black;
}
<div id="greeting">
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use a combination of relative and absolute positioning, table and table-cell display like this:
CSS:
#headerImage {
position: relative;
text-align: center;
display: inline-block;
}
#headerImage img {
max-width: 100%;
}
#greeting {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#greetin-h1 {
margin: 0;
display: table;
width: 100%;
height: 100%;
}
#greetin-h1 span {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="headerImage">
<div id="greeting">
<h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
</div>
<img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>
Fiddle: https://jsfiddle.net/ve8sot21/1
This way the h1 will always be centered horizontally and vertically no matter the image dimension.
.wrapper {
position: relative;
}
img {
display: block;
width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: gold;
}
<div class="wrapper">
<img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
<h1>Hello, World!</h1>
</div>
I have a navbar with a certain height and a logo that overflows. This logo is, of course, clickable, but it means that the part that overflows, is also clickable.
Is it possible to make the logo overflow, but not the clickable area?
HTML
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
JSFIDDLE
Something like this?
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
a {
display: inline-block;
height: 100%;
width: 100%;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
pointer-events: none;
}
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
Just move logo outside of your link and put that link on rest of header:
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
display: inline-block;
}
<nav>
<a href="#">
</a>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
Change little bit of you structure.
Put <a> independent and pass link in it with following css.
HTML
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
nav a{
position: relative;
display: block;
height: 100%;
z-index: 1;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
Example : https://jsfiddle.net/67s4ajqf/3/
Don't place the whole div inside the a.
Place the link after the image, give it absolute positioning and carefully set the position and size.
The other answers make the whole header clickable. If it is not desired, use this solution. You may have to adjust the width of the clickable area.
See the example below:
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a.clickable-logo {
position: absolute;
display: inline-block;
left: 36px;
top: 36px;
width: 600px;
height: 100px;
}
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
<a href="#" class="clickable-logo">
</a>
</div>
</nav>
What about something like this?
HTML
<a href="#">
<div class="clear">
</div>
</a>
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.clear {
height: 100px;
background: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
I'm learning HTML & CSS so I'm trying to copycat Coder Manual.
I made a div for the background (I'll just use one color for now) and another div for the content of that first blue section with the logo, navigation, etc..
However, I can't make the content div overlay the background div without using something like:
#content {
position: absolute;
top: 0;
}
but that prevents me from centering the content div using:
#content {
width: 50%;
margin: 0 auto;
}
What should I do in such situation?
Edit: here's the html:
<!DOCTYPE html>
<html>
<head>
<title>CM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
<div id="blue-div">
</div>
</body>
</html>
You can use transform to center it like this:
1-With position: absolute in an element with a known width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
margin-left: -20px; /*the half width */
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
2- With position: absolute in an element with an unknown width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
3- Centering even vertically
.center{
height: 80px;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
Personally, I do something like this:
.bg {
width: 100%;
}
.bg-blue {
background-color: blue;
}
.content {
text-align: center;
}
<div class="bg bg-blue">
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
</div>
but if you need to keep the divs seperate:
#BgBlue {
position: absolute;
top: 0;
z-index: -1;
height: 50px;
width: 100%;
background-color: blue;
}
.content {
text-align: center;
}
<div id="BgBlue">
</div>
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.
CSS
#slidecontainer {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 200px;
}
.slidecontrols {
top: 50px;
position: absolute;
z-index: 100;
width: 100%;
}
.slidecontrols a {
background-color: white;
}
.slidecontrols a.next {
position: absolute;
right: 0;
}
.slideshow {
width: 100%;
height: 100%;
}
.bannered {
height: 200px;
width: 800px;
}
HTML
<div id="slidecontainer">
<div class="slideshow" id="slideoptions">
<img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
<img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
</div>
<div class="slidecontrols">
right
left
</div>
</div>
Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.
Here's another option if you don't want to guess or set any pixels:
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.
Example Here
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
Example Here
.slidecontrols {
position:absolute;
top:0; right:0;
bottom:0; left:0;
z-index: 100;
width: 100%;
height:100%;
display:table;
}
.slidecontrols a {
display:table-cell;
vertical-align:middle;
}
Make top : 50% to slidecontrols which will align the links exactly at the center.
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
}
Another posibility if you consider the buttons has 20px height,
top: calc(50% - 10px); // 10px is half of buttons height
This will align it exactly at the center
When you have position: absolute, the vertical align will not work.