Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
Related
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>
I've created a large div-container that can contain multiple items (div's),
like that:
But, as you can see, there is an unwanted white gap at the bottom and to the right of each item and I don't know where this is coming from.
The items should be scrollable if they not fit into the Container (horizontally)
HTML:
<div class="maincontainer">
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
</div>
CSS:
.maincontainer {
width: 90%;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
I've also made a Plunker
Any help appreciated! Thanks
I found a solution. Setting the maincontainer's font size to 0 does it! Googled removing whitespaces in css and found:
this
By default, your divs are block elements, however, you changed them to inline elements. Inline elements have a whitespace. That is why there is a gap between your two elements.
You can change the maincontainer display to flex like so:
.maincontainer {
width: 90%;
display:flex;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
That should be it! :)
i want to center a image and place some text under it.
The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.
The Backgroundcolor has to be #EF762F
It worked for me on one screen with this
https://jsfiddle.net/j2Lec36d/ , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.
Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%
HTML:
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
CSS:
body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}
#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}
#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}
You can do this quite simple using flexbox:
$(document).ready(function(){
$( "#sh_start span" ).animate({
left: "50%",
left: "toggle"
}, 5000, function() {
// Animation complete.
});
})
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="sh_start">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQNjQ76c71y3CL0xrOhpl3wf3W5X3Mi3ddv1SUH3UbkPBz3SWPAuw">
<span>Test</span>
</div>
You can try to use the framework bootstrap and do like this:
HTML:
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<img src="http://placehold.it/700x400" class="img-responsive" alt="">
<h1>Text under image</h1>
</div>
</div>
</div>
CSS:
img {
margin: 0 auto;
}
The image CSS:
#sh_start img {
display: block;
padding: 5% 0 100px 0;
width: 40%;
height: auto;
margin: 0 auto;
}
The span CSS:
#sh_start span {
width: 100%;
height: auto;
display: block;
position: relative;
bottom: 20px;
// left: -100%;
left: 0;
color: #fff;
font-family: ReplicaPro-Bold;
font-size: 50px;
opacity: 0.4;
text-align: center;
}
And the container CSS:
#sh_start {
background-color: #EF762F;
}
You can just animate the left property of the span from 100% to 0.
You can see the code in action here: https://jsfiddle.net/7pnrq1xd/1/
I'm not entrirely sure what your restrictions are or if they are restrictions at all but why not just do this to your span:
left:0;
text-align:center
#sh_start {
display:block;
background-color:#EF762F;
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
overflow:hidden;
}
#sh_start img {
display: block;
padding:5% 0 0 30%;
width: 40%;
height: auto;
position:absolute;
top:5%;
left:0;
right:0;
bottom:0;
}
#sh_start span{
width: 100%;
height: auto;
display:block;
position:absolute;
top:58%;
left:0;
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
text-align:center;
}
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>
First Create a DIV Tag where you will place both your image and caption.
<div class="imagewrapper">
<img src="imagehere.jpg">
<p class="imagecaption">Image Caption Here</p>
</div>
Now Code your CSS Something like this.
.imagewrapper {text-align:center}
.imagewrapper img {max-width:100%}
Do not forget to add styling for your image caption class. With above code your image and text will stay in center on any screen size.
Hope that helps.
Regards
Manoj Soni
I have removed the position:absolute declarations, and compacted the CSS code
#sh_start
{
background-color:#EF762F;
width:100%;
height: 100vh;
float:left;
}
#sh_start img, #sh_start span
{
float:left;
width:40%;
height:auto;
margin-top:5%;
margin-left:30%;
text-align:center;
}
#sh_start span
{
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
margin-top:1px;
}
Then in the HTML I have fixed the 'img' closing tag.
<div id="sh_start">
<img src="test.jpg" />
<span>Test</span>
</div>
Live demo: https://jsfiddle.net/j2Lec36d/10/
I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}
Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>
You Just Remove
Position:absolute;
and Do what you want.
Thank you
It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
Here's my summarized code
HTML:
<div class="wrap">
<div>
<img src="Pictures/titlepic.jpg" width="1035" height="200">
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS:
.wrap{
width: 1060px;
margin: auto;
}
.text_over_image{
position: absolute;
top: 20px;
}
I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.
Ideas?
Try the following css:
.text_over_image{
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
===Edit ===
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
There you go JsFiddle
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>TEXT</span>
<img src="http://placehold.it/100x100"/>
</div>
HTML
<div class="wrap">
<div>
<h1 class="text_over_image">Welcome to my Sandbox</h1>
</div>
</div>
CSS
.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}