I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can't get the text to center vertically. So far, I have the following code:
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
</div>
</div>
In the CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
z-index: -1;
}
#step {
text-align:center;
color:white;
}
.stretch {
width:200px;
height:40px;
}
Using the table-cell/vertical-align technique I've seen often referenced elsewhere doesn't quite work.
Given that it's an H3 i'm assuming it's a heading so it's probably gonna be one line of text. If that's the case just set the line-heightof the h3to the height of the container.
If instead it's a paragraph you can do this:
#centeredDiv {
position:absolute;
top: 50%;
left: 50%
margin-top:-20px ;(half the height of the container)
margin-left: -100px; (half the width of the container)
}
Don't mix pixels with percentages.
Try:
#step {
text-align: center;
vertical-align: center;
color: white;
height: 40px;
}
EDIT:
Alternatively, you could try explicitly setting the height of #background to 40px instead of 100%. It should achieve the same effect.
Related
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
I'm trying to do something that doesn't seem to have been asked. I have a jsfiddle:
http://jsfiddle.net/kahanu/zo7yj3s0/4/
I have two floated divs side-by-side, the left div has content that creates height of the parent div. The right div will simply have buttons that need to be vertically centered in whatever height the left div creates. So there are no known dimensions, either height or width.
Here's what I have:
<div class="parent">
<div class="line">
<div class="left">
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
</div>
<div class="right">
<button>Center me vertically</button>
</div>
</div>
</div>
And this is the CSS:
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
height: 10%;
width: 100%;
background-color: grey;
font-size: 1.6em;
display: table;
}
.line {
display: table-cell;
vertical-align: middle;
background: blue;
}
.left {
float: left;
width: 50%;
background-color: yellow;
}
.right {
float: right;
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
}
I feel like I'm close, I'm just missing an important concept.
So how can I vertically center the button in the right-hand div?
Vertical align only applies to inline or inline-block elements. It affects the
alignment of the element itself, not its contents (except when applied
to table cells) When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
Read more on this here: http://www.impressivewebs.com/css-vertical-align/
What you can apply this CSS to your button.
button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you're into using mixins you can simply write a vertical alignment rule and reuse throughout your project.
Mixin:
#mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
CSS:
button {
#include vertical-align();
}
CODEPEN DEMO
Instead of floating the divs you could set their display to table-cell instead:
.left {
display:table-cell;
width: 50%;
background-color: yellow;
}
.right {
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
display:table-cell;
}
jsFiddle example
I want to have an avatar image with two divs on its right that are vertically aligned to it.
https://jsbin.com/qafiroquve/1/edit?html,css,output
I've read so many posts about this, but none of them seems to help me.
What is the best approach to having the image on the left with 30% of the main div's (header) width, and the info div with 70% of it?
If either of the info divs (name or position) has too much text, I want the info div to get vertically aligned to the image on its left.
I also want this info div to have a margin with the image.
I've tried so many options: float: left on avatar div, display: inline-block on both avatar and info, width: 30% and 40% . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.
You can use either table-cell how #w3debugger suggested or you can take advantage of a quick css hack to align vertically:
.yourclass{
position:absolute;
top: 50%;
transform: translateY(-50%)
}
But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,
I edited your example:
HTML:
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div><div class="info">
<div class="name">Important person here </div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
CSS:
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
position: relative;
}
.avatar img {
width: 30%;
border-radius: 50%;
}
.info{
box-sizing: border-box;
padding: 0 40px;
width: 70%;
position:absolute;
right: 0;
vertical-align: top;
top: 50%;
transform: translateY(-50%)
}
Live preview:
https://jsbin.com/gogewefizo/1/edit?html,css,output
Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.
Please check the code below.
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
display: table;
}
.avatar img {
width: 150px;
}
.avatar,
.info {
display: table-cell;
vertical-align: middle;
}
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div>
<div class="info">
<div class="name">Important person here</div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
I'm working on a site that has a fixed width div that is centered and I wanted to have two designs on either side of the div which I was able to get using two divs. The issue is the way I did it, those images add to the site width, causing a horizontal scroll bar to appear if the window is too small. Even though the whole content div fits with in the screen.
CSS
.container {
margin: 0 auto;
width: 500px;
}
.span {
margin-right: 0;
width: 500px;
}
.logo {
margin-top: 25px;
}
.logo-img {
height: 60px;
left: -21px;
position: relative;
}
.swirls {
height: 0px;
}
.left-swirls {
position: relative;
top: -50px;
right: 100px;
width: 188px;
z-index: -1;
}
.right-swirls {
position: relative;
top: -50px;
left: 215px;
width: 200px;
z-index: -1;
}
.nav {
background-color: #0ff;
}
.content {
background-color: #00f;
height: 200px;
}
HTML
<div class="container">
<div class="span logo">
<img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/>
</div>
<div class="span swirls">
<img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" />
<img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" />
</div>
<div class="span last nav">
Nav Bar
</div>
<div class="span content">
Body content
</div>
</div>
An example of the issue can be viewed here: http://jsfiddle.net/e4j6b/8/
I'm trying to get the background image(s) centered relative to the div instead of the sides of the browser.
Is there a way to center a background image just like a div with margin: 0 auto?
If you want .left-swirls and .right-swirls to not add to the width of the document, then they should be background images. (For modern browsers, multiple background images work fine.)
Example: http://jsfiddle.net/MbGSP/1/
body {
background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat,
url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat;
}
You can center background images, both horizontally and vertically, with center center for the positions.