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)
Related
I have two questions. Essentially, I want to display an image in its original size and place it in the middle of the screen(by middle I mean in the "horizontal" middle not the center of the screen), and then place a div with texts right below this image. This is the code I use:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
This is the css:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
I have two questions. The first one is when the image height is theoritcally longer than the screen height, there is no vertical scrollbar, the image just got resized to fit the screen. The second question is how can I place the text below the image without knowing the size of the image? I tried figcaption but it doesn't work.
To make it perfect center, you might need min-height: 100vh; and min-width: 100vw; then use display flex to center it. Otherwise, you might not center it vertically.
Also, move your text block inside one div with the img.
by default, the img will not resize unless you specify it.
By default div has display block so it will take the whole row, with text-align: center; it will just center your text.
.figure {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 100vw;
}
.centered {
text-align: center;
}
html,
body {
padding: 0;
margin: 0;
}
<div class="figure">
<div>
<img src="http://placehold.it/950x450">
<div class="centered">
text here
</div>
</div>
</div>
First of all I I assume this does what you have in mind.
html
<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>
CSS
body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}
img {
margin: 0 auto;
display: block;
}
.text {
margin: 0 auto;
display: table;
}
Your first question about why the image is resized when it's bigger than the page. I have to point out that in your CSS you set the image to be the 100% the of the possible width and height and by default, the images will be stretched to fit the element.
To answer your second question, because your "figure" div containing the img position is absolute it ignores the position of other elements. Change position to another type such as "position: relative" and it will position its self with other elements in mind.
I'm not the most confident in html and css skills but I hope my two cents at least helps you press on forward.
I have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?
Here is a Fiddle of the issue I'm experiencing.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
CSS:
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}
.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
Is this what you're looking for?
The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too
Updated fiddle
html, body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: 100% auto;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: black;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.
Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.
See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.
So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.
To stay centered add the following to the outer-wrapper: (Fiddle)
background-position: center;
To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)
background-position: center;
background-cover: cover;
I am trying to make my site logo/banner fit the content box correctly.
Unfortunately, it is appearing at different widths on different computer resolutions and window sizes.
This is also happening with my banner ad within the content box.
CSS
#logo {
max-width: 100%;
height: auto;
width: auto;
}
HTML
<div id="logo">
<center>
<img src="logo.png" alt="Image of Traffic Monsoon">
</center>
</div>
The website is here.
To center an inline level element like <img> tag, you can set text-align:center; on the container, with your example:
#logo {
text-align: center;
}
<div id="logo">
<img src="logo.png" alt="Image of Traffic Monsoon">
</div>
In addition, remove <center>, it has been deprecated. And add following lines to make the image to shrink to fit automatically when its intrinsic width is larger than the container:
#logo img {
max-width: 100%;
height: auto;
}
<center>is deprecated so don't use it.
To fix your issue you need to target the img not the div
use margin:auto and display:block to center the image instead of the deprecated center
#logo img {
max-width: 100%;
height: auto;
width: auto;
margin:auto;
display:block
}
<div id="logo">
<a>
<img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon">
</a>
</div>
If you want to apply this generally to all images in the site, just do this:
img {
max-width: 100%;
height: auto;
width: auto;
}
Wrap your whole page in a <main> element, or a wrapper class. Set your max-width on that element, and all subsequent elements can have width:100% set.
Please try this:
First of all wrap you entire page with a div named wrapper.
<div class="wrapper">your code here</div>
Then apply this css below:
.wrapper {
margin: 0 auto;
width: 1574px;
}
#logo {
margin: 0 auto;
text-align: center;
width: 1331px;
}
#logo img{
text-align: center;
width: 96%;
}
I am using Foundation 6 to try to create a header image which overlaps part of a navigation bar. It uses the .row class as a responsive div.
HTML
<header class="row text-center">
<a href="//google.com">
<img src="path/to/horizontal banner image">
</a>
</header>
<nav>
<div class="row text-center">
Text here
</div>
</nav>
CSS
header{
background-color: lightgreen;
}
nav{
margin-top: -5%;
font-size: 150%;
background-color: lightblue;
}
http://jsfiddle.net/hvmt2j1j/
As illustrated in the above fiddle, I have an image and a nav bar that includes links. The image itself is a link too.
However I found out that:
when the screen size is large, the text goes upward and does not not
align with the image properly anymore.
In some browsers the image link overlaps the nav bar link. I would like to restrict the clickable area of the image to the green area only.
I am quite new to this, therefore I believe there is probably a better way to structure the <div> tags or CSS to achieve this. Thank you very much.
My proposition:
body {
margin: 0;
}
header {
background-color: #6C6;
background-image: url("http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png"), url("https://i.imgur.com/TILTsNC.png");
background-repeat: no-repeat, repeat-x;
background-position: top center, bottom;
height: 189px;
max-width: 100%;
width: 550px;
}
.green {
display: block;
height: 80%;
}
.blue {
display: block;
font-size: 2em;
height: 20%;
text-align: center;
text-decoration: none;
}
<header>
<a class="green" href="https://www.google.com/"></a>
<a class="blue" href="https://www.yahoo.com/">Text here</a>
</header>
You define a header with just two <a> elements that you treat as block (flow in HTML5) content, meaning they will behave just like divs, but will be clickable of course, because they are still links after all. To do so, you got to give them display: block style. Then you need to stack two backgrounds for <header>. First one is your picture and the second one is lightblue color with width of 1px and height of desired blue area height (in this case 20% of 189px). More info on Using CSS multiple backgrounds (MDN).
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">