I want to center an absolute positioned image horizontally in a relative positioned container. I tried to do with css. But I could't and i did in Jquery
http://jsfiddle.net/CY6TP/ [This is i tried to do in Jquery]
**Guys can anyone help me to do this in CSS.**
Thanks in advance
try this:
var width=$('.main').width();
var height=$('.main').height();
$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50
});
DEMO
UPDATE
In CSS
.main a{
bottom:50%;
margin-top:-150px;
position:absolute;
left:75px;
}
DEMO
You can set all in css like this :
a{
position : absolute ;
height : 10px;
width : 100px;
top : 50%;
margin-top : -5px;
left : 50%;
margin-left : -50px;}
Demo
try this to make it horizontally center
a{
position: absolute;
text-align: center;
width: 100%;
}
OR this to make it horizontally and vertically both center
a {
height: 100%;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.main img { top:50%; left:50%; margin: -11px 0 0 -50px; position: absolute;}
Is this you want?
If your height is fixed, you could use something like this maybe?
CSS:
#div1 {
width:100%;
height:100px;
text-align:center;
}
#div1 img {
line-height:100px;
}
HTML:
<div id="div1">
<img src="yourimage.jpg" />
</div>
Related
I've been trying to create a sticky position image that changes as it scrolls across the border between two sections of my page. So basically, there should be two sticky position images, the top one gets masked by the bottom section and the bottom gets masked by the top section. I am having trouble figuring out a way to mask both images at the same time (you can use the bottom section div to hide the top image, and vice versa, but not both at the same time).
Here's an image to illustrate what I'm trying to do
Here's the code I'm using:
.lblue {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightblue;
}
.lred {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightcoral;
}
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background:blue;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background:red;
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
Thank you!
Here’s a solution. The trick is to use the images as CSS backgrounds, because CSS backgrounds can be easily fixed in the viewport of their parents.
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;
}
<div class="blue"></div>
<div class="red"></div>
In this solution, you can replace linear-gradient(color, color) by the URL of your image, using url(https://…). I used gradients because, for the browser, gradients are (generated) images. So, this trick actually works with images.
The position: absolute also becomes useless, at least for the demo.
The long background rule may need some explanations. background is a shorthand (= a short way to write several properties in a single line) for:
background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;
position:fixed can do this if you conside a clip-path trick to hide the overflow so that each element will show only inside its section
.lblue,
.lred {
height: 40vh;
width: 10vw;
position: fixed;
top: 30vh;
left: 45vw;
background: lightblue;
}
.lred {
background: lightcoral;
}
.blue,
.red {
height: 100vh;
background: blue;
clip-path: inset(0 0 0 0); /* this is important */
}
.red {
background: red;
}
body {
margin: 0
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.
DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}
How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}
You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>
Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}
I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.
Here is my div css
.box
{
padding-top:20px;
padding-left:5px;
background-color: #ffffff;
background-color: rgba(221,221,221,0.5);
border: 1px solid black;
border-radius: 25px;
filter: alpha(opacity=90);
height: 125px;
width: 250px;
z-index: 1;
}
<form id="form1" runat="server">
<div id="box"><div>
</form>
Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.
Use position:absolute if you need it centred both horizontally and vertically:
#box {
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
/* etc */
}
http://jsfiddle.net/wcFMw/
To center horizontally:
margin:auto;
To center vertically:
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
You could also use position: fixed to make the div centered even when scrolling the page.
Also note that you'll have to use # instead of . to select by id. . is the CSS selector used for class.
JsFiddle
margin:0 auto;
Add this property to your css class.
I am trying to change the size of the image for the ui slider handler to increase as you move the scroller to the right and to decrease in size as you scroll it to the left. I will be using a SVG of course so the scale remains accurate! any ideas? :(
Ye can check out the code here:
http://jsfiddle.net/userdude/3teR3/
or here:
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
<div id="slider"></div>
$(function() {
$("#slider").slider();
});
You can make the size of the .png dependent from width and height and change these with the slider-value:
HTML:
<div id="slider"></div>
CSS:
html,
body {
width: 100%;
}
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
background-size:100%; /*this is the importent thing!*/
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
Javascript:
$(function() {
$("#slider").slider({
min:0, max: 10,
slide: function(event,ui){
$(".ui-slider-handle").css('width',28*(1+(ui.value)));
$(".ui-slider-handle").css('height',28*(1+(ui.value)));
},
});
});
And here as jsFiddle: http://jsfiddle.net/1Blerk/3teR3/20/
Maybe it is still usefull for you.