I'm stumped by something that feels like it should be simple!
I'm trying to center a logo in the centre of a <header>. The logo is made up of an <a> with a background image which is the logo icon and the anchor text is the logo name. I have the logo icon centred using margin: 0 auto; on the <h1> but can't find a good solution to centering the icon and the text together as one unit.
<header>
<h1>
Logo Name
</h1>
</header>
CSS:
header h1 {
height: 54px;
width: 54px;
background: url('../img/logo.png') no-repeat left;
margin: 0 auto;
}
a.logo {
font-size: 33px;
margin: 0 auto;
display: block;
padding-top: 20px;
}
Any ideas?
I usually do it like this:
<style>
.logo{
margin: 0px auto;
padding-left: 120px; /* the space between the start of your logo and your text */
padding-top: 30px; /* the vertical space between the top and your text, to center the logo*/
display: block; /* very important since normally anchors are inline */
background: url(path/to/logo.png) top left no-repeat; /* obviously :) */
}
</style>
It really don't need to be inside an h1.
When you see results, yo may not see it centered, well, measure your unit, and specify a width and a height inside the .logo rules above.
you can position the background using css.
background-position:center;
you can also define it by pixels or percent
background-position:20px 50px;
background-position:50% 50%;
you have put background url left it should be center
try this
background: url('../img/logo.png') no-repeat center;
This might work.
<header style="align:center">
Related
I created an image and I wanted to use that as an hr for a page. When it's uploaded it is justified all the way to the left. I want it to be centered, under the heading. This is my css code:
.section-underline {
height: 35px !important;
display: block;
background-image:url("http://s18.postimg.org/rhqgsx8bp/underline.png") !important;
background-repeat: no-repeat;
border: 0;
}
This is a link to the page I'm working on: http://fortunabakery.getbento.com/
and a screenshot: underline and header
Sure, set an explicit width and then apply margin-left: auto; margin-right: auto; and it will be centered!
In your case, that means:
.section-underline {
width: 133px;
margin-left: auto;
margin-right: auto;
}
in your CSS, use background-position: center center
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
This is the header of my page:
--------------------------------
Logo | fixed | Title with
Image | margin | unknown width
--------------------------------
I want to horizontally center the whole header in my page. Currently I set the logo image as the background image of a container and wrap the title in the container.
HTML is:
<header role="banner">
<div class="logo">
<h1>Title</h1>
</div>
</header>
CSS is:
header[role="banner"] .logo{
height: 76px;
background: url(/images/logo.png) no-repeat;
}
.logo h1{
line-height: 76px;
text-indent: 96px;
}
Before you answer please notice that the hard parts of this problem are:
The width of title is unknown.
There is a logo image to the left of the title. Only centering the title is what I already know how to do but not what I want. Centering the image is just wrong — [logo + title] is to be centered, logo should not be centered in the header.
I'm not sure if your HTML is the best way of having a logo and page title. I'd personally go with an <img> for the logo.
You can use the display: table and display: table cell for centering without knowing the width.
Here's how I'd do it with the image for a logo:
HTML
<header role="banner">
<div class="extra-container">
<div class="logo">
<img src="http://placehold.it/100x76" alt="Logo Image" />
</div>
<h1>Title</h1>
</div>
</header>
CSS
header[role="banner"] {
display: table;
margin: 0 auto;
}
header[role="banner"] .extra-container {
display: table-cell;
}
header[role="banner"] .logo {
margin-right: 40px;
float: left;
}
header[role="banner"] .logo img {
display: block;
}
h1{
line-height: 76px;
display: inline-block;
}
http://jsbin.com/UhIqUXe/1/edit
You don't need the <div> to be honest. Make the background of the <header> your background image like this:
header[role="banner"] {
background: url(/images/logo.png) center top no-repeat;
width: 100%;
height: 76px;
}
And to center your title put text-align: center;
The header will need to have a width specified in order for the margin trick to work. If you don't know the exact width you could use a percentage for the header tag.
Have a look at this source CSS-Trick
The best way should be set margin..
margin:0px auto 0px auto;
this will set margin of top and bottom to 0px and right and left to auto,
this will trick the wrapperDiv in center( the container of image or text)
I currently have this markup:
<h1 class="title" id="page-title">
<span id="page-title-inner">Home</span>
</h1>
And this CSS:
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
}
#page-title-inner {
width: auto;
float: left;
background: #fff;
padding: 0 15px;
position: relative;
left: 45%;
}
This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.
What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.
I have tried to do something like:
#page-title-inner {
width: auto;
float: left;
background: #fff;
margin: 0 auto;
display: block;
}
where the margin 0 auto value is what would center the span but I wonder why it doesn't work.
Is there a better way and more efficient to achieve what I want to do?
remove float:left & left:45% property of span to make it center. Also set text-align:center for your H1 tag.
Unless you do something special with the span, you dont need it:
<h1 class="title" id="page-title">
Home
</h1>
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
text-align: center;
}
if you do need to do something with the span:
#page-title-inner {
/*width: auto; */
/*float: left; */
background: #fff;
padding: 0 15px;
/*position: relative; */
/* left: 45%; */
}
Float left makes it, well, float left. And the percentage for the left will never work, because the content of the span can be various sizes
You actually dont need to give the span an ID, you can simple do this:
h1#page-title span{ /* ... */ }
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.