I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.
CSS
#slidecontainer {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 200px;
}
.slidecontrols {
top: 50px;
position: absolute;
z-index: 100;
width: 100%;
}
.slidecontrols a {
background-color: white;
}
.slidecontrols a.next {
position: absolute;
right: 0;
}
.slideshow {
width: 100%;
height: 100%;
}
.bannered {
height: 200px;
width: 800px;
}
HTML
<div id="slidecontainer">
<div class="slideshow" id="slideoptions">
<img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
<img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
</div>
<div class="slidecontrols">
right
left
</div>
</div>
Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.
Here's another option if you don't want to guess or set any pixels:
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.
Example Here
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
Example Here
.slidecontrols {
position:absolute;
top:0; right:0;
bottom:0; left:0;
z-index: 100;
width: 100%;
height:100%;
display:table;
}
.slidecontrols a {
display:table-cell;
vertical-align:middle;
}
Make top : 50% to slidecontrols which will align the links exactly at the center.
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
}
Another posibility if you consider the buttons has 20px height,
top: calc(50% - 10px); // 10px is half of buttons height
This will align it exactly at the center
When you have position: absolute, the vertical align will not work.
Related
I'm trying to make an image that overflows on it its parent div, but that's centered according to its parent.
Heres how I'd like it to look:
This is the code I currently have but obviously doesn't work,
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position:absolute;
}
body{
background:purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
JSFiddle
Fiddle
I want to achieve this in pure css, no use of javascript.
You can center your image with the "negative translate" trick.
Here's a working example:
.wrapper {
height: 150px;
width: 150px;
position: relative;
background: red;
margin: 5em auto;
}
.image {
width: 175%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background: purple;
}
<div class="wrapper">
<img class="image" src="https://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Based on this question.
.wrapper{
height:150px;
width:150px;
position:relative;
background:red;
margin:5em auto;
}
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
body{
background:purple;
}
Try this:
.image{
width:175%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
It should center your <img> no matter the size of the parent div
Oh looks like I'm late to this party, but I was going to suggest this technique - using the ::after pseudo element to draw your square underlay and don't actually make the image overflow the wrapper div.
https://codepen.io/hamzatayeb/pen/QMxJvw
<div class="wrapper">
<img class="image" src="http://pngimg.com/uploads/goat/goat_PNG13151.png">
</div>
Then this CSS -
.wrapper {
width: 262px;
height: 262px;
position: relative;
margin: 5em auto;
}
.wrapper::after {
content: "";
background: red;
position: absolute;
top: 16%; right: 16%; bottom: 16%; left: 16%;
z-index: -1;
}
.image {
padding-top: 25px;
width: 100%;
height: auto;
}
body {
background: purple;
}
Try this add this style only to your image
.image{
width:175%;
height:auto;
position:absolute;
top: -18px;
right: -65px;
}
JS Fiddle
As you can see from this fiddle:
http://jsfiddle.net/t1h3aauh/2/
I'm through a problem that I've never been before. I'm working with Drupal CMS and it generates a lot of the markup you need to style.
Given the use case, I have a MODAL box that are wrapped into a lot of divs and, like all MODALS, it need to be FIXED positioned. But, when I do this, the behavior is very much like absolute positioning. It get stuck in place and inherit all the .wrap div dimensions.
Thanks for the help.
Edit
The code:
HTML
<header class="sticky">log and menu</header>
<main>
<section class="test">
<div class="wrap">
<div class="myEl">
<!--HERE BE SOME SCROLLABLE ELEMENTS-->
<div.class="iWannaBeScrollable">i'm scrollable</div>
<!--HERE BE THE FIXED ONE-->
<div class="modal">as you can see, this should be FIXED, but appears to be stuck into the parent.</div>
</div>
</div>
</section>
</main>
CSS
body{
margin: 0;
padding: 0;
}
.sticky{
float: left;
position: fixed;
height: 40px;
width: 100%;
background-color: green;
left: 0;
top: 0;
z-index: 10;
}
.wrap {
background-color: #333;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: auto;
max-width: 1200px;
float: left;
position: relative;
left: 50%;
}
main {
height: 1535px;
width: 100%;
float: left;
position: relative;
.test {
width: 100%;
height: auto;
padding: 72px 0;
float: left;
position: relative;
&::before{
content: "";
width: 100%;
height: 82%;
top: 21%;
background-color: #fafafa;
position: absolute;
}
.myEl{
float: left;
position: relative;
height: 300px;
width: 100%;
.modal {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(255,0,255,.5);
left: 0;
top: 0;
z-index: 100;
}
}
}
}
Why is there
transform: translateX(-50%);
on the .wrap element?
I think thats causing your problem...
IIRC: In my Drupal days, anytime you needed to fix an element, you wanted to call the top most parent.
So in this case, you would want to apply postioned:fixed it to .wrap.
.wrap{
position:fixed;
}
Here's why:
You are styling Modal with the fixed, so it is staying fixed within it's parent. You're parent/grandparent is styled as position:relative. Which makes .wrap and .myEl scrollable, while the modal is fixed within the scrollable div.
This makes it appear as if it is position:absolute;
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
div#thing {
position: absolute;
top: 0px;
z-index: 2;
margin: 0 auto;
}
<div id="thing">
<p>text text text with no fixed size, variable font</p>
</div>
The div is at the top, but I can't center it with <center> or margin: 0 auto;
Your problem may be solved if you give your div a fixed width, as follows:
div#thing {
position: absolute;
top: 0px;
z-index: 2;
width:400px;
margin-left:-200px;
left:50%;
}
div#thing
{
position: absolute;
width:400px;
right: 0;
left: 0;
margin: auto;
}
I know I'm late to the party, but I thought I would provide an answer here for people who need to horizontally position an absolute item, when you don't know its exact width.
Try this:
// Horizontal example.
div#thing {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
The same technique can also be applied, for when you might need vertical alignment, simply by adjusting the properties like so:
// Vertical example.
div#thing {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
To center it both vertically and horizontally do this:
div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.contentBlock {
width: {define width}
width: 400px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
I was having the same issue, and my limitation was that i cannot have a predefined width. If your element does not have a fixed width, then try this
div#thing
{
position: absolute;
top: 0px;
z-index: 2;
left:0;
right:0;
}
div#thing-body
{
text-align:center;
}
then modify your html to look like this
<div id="thing">
<div id="thing-child">
<p>text text text with no fixed size, variable font</p>
</div>
</div>
Or you can use relative units, e.g.
#thing {
position: absolute;
width: 50vw;
right: 25vw;
}
If it is necessary for you to have a relative width (in percentage), you could wrap your div in a absolute positioned one:
div#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
Remember that in order to position an element absolutely, the parent element must be positioned relatively.
Yes:
div#thing { text-align:center; }