I'd like to place my H2 text vertically & horizontally center over my image.
Can someone explain how I do this?
https://jsfiddle.net/q3odxfmb/
<div class="content">
<img src="http://placehold.it/940x510">
<h2>
TEXT WILL GO HERE
</h2>
</div>
fiddlehttps://jsfiddle.net/q3odxfmb/1/
img {
max-width: 100%;
vertical-align: middle;
}
#container {
position: relative;
}
#text-outer {
height: 100%;
margin-left: 12.5%;
position: absolute;
top: 0;
width: 75%;
}
#text-inner {
color: #fff;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
this question already asked so many times please refer this link
thank you all
Text Above Image CSS Z-Index Not Working
It's quite easy. Simply set css to:
.h2 {
line-height:/*height of your image*/
}
Then set the margin in the div to auto:
div {
background-url: <image-link>;
margin:auto
}
This should center it perfectly.
You would have to have a small margin set for this method.
Here is a JSBin with an easy method, too:
https://jsbin.com/vawowebolu/edit?html,css,js,output
set the text as a background over a div, and center the text over the div.
HTML:
<div class="content">
<h2 id="mytext">
TEXT WILL GO HERE
</h2>
</div>
CSS:
div {
background: url("<image-link>")
}
#mytext {
line-height: 510px;
vertical-align:middle;
text-align: center;
}
Related
How do I create a banner and center text on the middle of it?
I have tried to use relative position on Wrapper and absolute on the image div but couldn't position.
#banner {
position: relative;
width: auto;
}
#banner_wrap img {
position: absolute;
top: 150px;
left: 50px;
}
<div id="banner">
<div id="banner_wrap">
<img src="fe_bg_login_.png" />
<div id="rockstar">
<h1>I am a Rock Star Dude!</h1>
</div>
</div>
</div>
You can use text-align: center; to do that.
JSFiddle to see it.
I think this is what you're looking for:
h1 {
text-align: center;
}
text-align: center; property could let you do that.
#banner {
position: relative;
width: auto;
background: #333; color: #fff;
text-align :center;
}
The image in absolute position will not be centered if you use text-align: center in the banner, that's why I removed that absolute position and put it after the heading to get the same behavior.
Fiddle
Source :
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
My header image is overlapping my text and it is very much annoying me. Another thing that is buggy is how my logo text leans right of the center of the image. If someone could help me with both that would be awesome.
Here is my code:
https://jsfiddle.net/c2bom0cc/1/
Here are my tags that are probably the most relevant to this:
#index_header {
position: block;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
#index_header img {
position: block;
float: left;
width: 100%;
height: 100%;
}
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50%;
top: 50%;
}
<div class="page_container">
<div id="index_header">
<a href="#">
<img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
/>
<p class="background_title">G.F. Bakery</p>
</a>
</div>
</div>
I let myself hold a few assumptions on your code:
First, by the full height and width of the image, I figured that you want the image as a stretched background image. So I replaced the <img> with background-image (background shorthand) in CSS Backgrounds.
From your question I see that you want the title in the center of the bakery background.
I did not get what text is overlapped by the image.
If you want text below the image, please put it in an element after <div id="index_header">...</div>, as the background is all over that <div>.
I had to add display:inline-block to .background_title class, so that the vertical-align:middle; would take effect.
I removed all the absolute positioning to handle better with all the alignments.
Absolute positioning make you manually set all the top and left, and it's really difficult to do when your code gets bigger.
Here's you new HTML:
<div class="page_container">
<div id="index_header">
<a href="#">
<p class="background_title">G.F. Bakery</p>
</a>
</div>
<p>Some other content...</p> // this text will not be overlapped by
// #index_header as long as #index_header
// isn't absolutely positioned
</div>
Here's your new CSS:
html, body{ // this is instead of having top:0 and left:0 in #index_header
padding: 0;
margin: 0;
}
.page_container {
height: 100%;
width: 100%;
}
#index_header {
height: 200px;
width: 100%;
text-align: center;
vertical-align: middle;
background: url('http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg') no-repeat center center;
background-size: 100% 100%; // this does the stretching
}
.background_title {
display:inline-block; // this is to apply the vertical-align of parent
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
}
Here's a JSFiddle
Hope this helps.
If you want your text to be under your image and centered, remove the following code:
.background_title {
position: absolute;
}
Just removing the position will move your text under your image and centered.
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I'm trying to align my header text in the middle of the page, over the image. The image is aligned in the centre, but the text is to the left of the page.
I tried to copy this solution, but I'm obviously not doing something right. Any help would be really appreciated.
HTML:
<header>
<div class="tag">
<h1>Some text here</h1>
<h3>And more text here</h3>
</div>
<img src="http://www.placehold.it/900x300">
</header>
CSS:
header {
height: 200px;
line-height: 50px;
text-align: center;
background: #303e49;
position: relative;
}
.tag {
text-align: center;
background: #303e49;
position: absolute;
}
1st you shouldn't tagged jquery cause its css
2nd add left 0 and right 0 to your absolute element to get the full width of the contain div
.tag {
text-align: center;
background: #303e49;
position: absolute;
left: 0;
right: 0;
z-index : 1;
}
So I've been working on a page with text and an image. However, I can't find a way to put the image between the text. either it stays on the top left, or it only centers horizontally. here is the code that is of importance:
<style>
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin-left: auto;
margin-right: auto;
display: block;
positon: relative;
}
#hypetop {
position: fixed;
top: 0;
width: 100%;
}
#hypebot {
position: fixed;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
</style>
<body>
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="DIREHYPE.png" width="224" height="224">
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
</body>
If anyone knows how I could get the image centered between the text, that would be great.
You can use this responsive css code. It may be help for you. Try it.I can change only position:fixed to position:relative.
Live Working Demo
HTML Code:
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/>
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
CSS Code:
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin:auto;
display: block;
position: relative;
margin-top:50px;
}
#hypetop {
position: relative;
top: 0;
width: 100%;
}
#hypebot {
position:relative;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
Result:
Remove position:fixed; from hypetop and hypebot. This caused these elements to have fixed positions and not relative to the image.
you have to imagine them as blocks first. From what I get .. you need 3 blocks in the horizontal order: paragraph | image | paragraph , which gives us the following structure:
<p></p><img></img><p></p>
what you are missing is.. that you need to use the span tag instead fo a tag to make them not break. Which is opposite of making the page responsive (using )
simply put them like this:
<span>
<span id="test"><h1></h1></span>
<img src="" width="200px" height="200px" />
<span id="test"><h1></h1></span>
</span>
#test {
position: relative;
height: 200px;
width: 200px;
text-align: center;
display: block;
}
giving the above css rules... puts the text into a invisible/transparent block.. because we are not declaring any backround-color value. thus all 3 blocks become equal size.. 200px by 200px .. side-by-side in one line..