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..
Related
I'm trying to get a small yellow swoosh to underline a word in some text and stay where it is as the page resizes. Right now I can get the swoosh in the right spot under the text, but when the screen resizes it all goes to hell.
Here is an image of what I'm going for
<div>
<span>
<h1>How are you doing? Hello World.</h1>
<img src="imageurl here">
</span>
</div>
div {
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width: 40%;
position: absolute;
}
h1{
text-align: center;
}
span {
margin-left: 140px;
top: 40px;
position: absolute;
z-index: -1;
}
(I didn't want to share the image URL as it is proprietary)
Any ideas on how to achieve this type of effect responsively?
Put your image inside of the h1 tag and give your h1 tag a position property. Also make sure you are setting h1 to be a inline-block element and center it somehow.
<h1>How are you doing? Hello World.<img src="imageurl here"></h1>
h1{
text-align: center;
position: relative;
display: inline-block;
margin: 0 auto;
}
img{
left: 0;
top: 0;
position: absolute;
z-index: -1;
}
There are many different ways to achieve what you're after.
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;
}
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.
Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!
I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>