I got this codepen, while it works perfectly, I cannot figure out why it cannot center the text in the middle of the containing box. Following is my code which center it vertically and now I want to center it horizontally too.
.container-box p{
position:absolute;
margin:auto;
height:40px;
background:grey;
color:white;
padding:10px;
box-sizing:border-box;
top: 0; left: 0; bottom: 0; right: 0;
display:table;
vertical-align:center;
}
You need to give a width property for the margin: auto(centering) to work.
.container-box p {
position:absolute;
width: 25%; //add this
margin:auto;
...
}
Also another main issue is that the p is center aligning to the container(.container-box) and not the image. Make sure the image is covering that entire container. You can do that by
.container-box img {
width: 100%;
}
Now it will look like the text is in the center of the image but in literal the text is in the center of the container and your expanding the image to entire container.
You can do it with the positioning:
* {margin: 0; box-sizing: border-box}
.container-box {
display: inline-block; /* can also use "inline-flex" */
position: relative; /* since one of the children is positioned absolute */
}
.container-box > img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
.container-box > p {
position: absolute; /* positioned relative to its parent */
top: 50%; /* moved down by 50% of the parents height */
left: 50%; /* moved right by 50% of the parents width */
transform: translate(-50%,-50%); /* moved left and up by half of its width and height to achieve the perfect center */
height: 40px;
background: Gray;
color: #fff;
padding: 10px;
}
<div class="container-box">
<img src="https://placeimg.com/640/480/any" alt="">
<p>This is a temp. Image.</p>
</div>
.container-box p{
position:absolute;
margin:auto;
width: 200px;
...
}
Also give width 100% to the image.
.container-box img{
width: 100%;
}
Check this Modified version Codepen
Use left:50% and top:50%. I cleaned up the CSS a little
.container-box p{
position:absolute;
height:40px;
background:grey;
color:white;
padding:10px;
box-sizing:border-box;
display:table;
left: 50%;
top: 50%;
}
Related
body{
max-width:1366px;
}
.gotop{
position:fixed;
right:9px;
bottom:7px;
cursor:pointer;
width:25px;
}
gotop is a button to scroll page on top and it must not be scrollable, i.e. must be fixed.
Problem is on monitors greater than 1366 px. The button is far right from the body.
How to keep it fixed, but inside body?
One possible solution is to omit top, right, bottom, left values for the fixed button. This way it will be sticked to the container:
.container {
position: relative;
max-width: 800px;
height: 200vh; /* for scrolling demo */
margin: 0 auto;
border: 1px solid black;
}
.button-wrapper {
position: absolute;
right: 35px; /* button width plus margin */
top: 30%; /* or whatever you need */
}
.button {
position: fixed;
width: 25px;
height: 25px;
cursor: pointer;
background: black;
}
<div class="container">
<div class="button-wrapper">
<div class="button"></div>
</div>
</div>
Try This
body{
max-width:1366px;
background:#f1f1f1;
}
.gotop{
position:absolute;
right:25px;
bottom:25px;
cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>
I wouldn't recommend using max-width on the body... you should put it on a div that wraps everything in the page instead.
Then place your button at the bottom of wrapper with the following CSS applied. Tweak the values to get a better position if you need it.
.wrapper{
position: relative;
height:200vh;
width: 100%;
max-width:400px;
background: #000;
}
.holder{
position: absolute;
top:92.5%;
right:0;
background: #ccc;
}
.button{
height:30px;
width: 70px;
position: fixed;
margin-left:-70px; /* minus width */
bottom:10%;
}
<div class="wrapper">
<div class="holder">
<button class="button">Test</button>
</div>
</div>
What you asking is rather an old way of doing things but it can be achieved.
Set the width of body.
Set fixed element to center.
Offset center by width of body and fixed element.
html,
body {
position:relative;
height: 100%;
max-width: 200px;
margin: 0 auto;
border:1px solid #111;
}
.gotop {
position: fixed;
left:50%;
bottom: 7px;
cursor: pointer;
width:40px;
background:#eee;
margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>
I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
DEMO http://jsfiddle.net/yusuuqck/
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
Could you set the second image like a background and the containing div dislpayed as flex, and the play button with margin auto. So, that button always be centered in the box.
Here better explained:
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
this might help
<div class="bg_img">
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg">
<span></span>
</div>
css
.bg_img { position: relative; }
.bg_img span {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url(http://maxcdn.clubcooee.com/img/icons/play-button2.png) no-repeat center center;
}
Use div display as table cell.
http://jsfiddle.net/yusuuqck/2/
HTML
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
CSS
div {
position:relative;
width:100%;
height:100%;
display: table-cell;
}
.ply{
position:absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px; /* Half the height */
margin-left: -25px; /* Half the width */
}
Check this code.
div{
position:relative;
display:flex;
img{
width:100%;
height:auto;
}
}
.ply{
position:absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px; /* Half the height */
margin-left: -25px; /* Half the width */
}
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
I have an image inside a div, I want to center the image vertically and horizontally, tried different approaches like making container display as table and image as table-row etc.
Here it's not aligning vertically.
Here is my code:
<div class="container">
<img src='images/img1.jpg' class="imgclass">
</div>
CSS:
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
}
.container img {
max-height: 100%;
}
You can use this absolute method:
JSFiddle
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
}
.container img {
max-height: 100%;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
This way, you don't need to change the structure of your HTML and it will always be in the center, no matter what height or width you give the element, or even if you re-size the page.
You also don't have to know the size of the image.
Browser Compatibility:
Chrome, Firefox, Safari, Mobile Safari, IE8-10.
An easier solution would be to place the image as a background image inside the div
.container
{
background:url('images/img1.jpg') no-repeat center center;
width: 70%;
min-height:400px;
}
You can also use the table inside the div and vertical and horizontal align the content of the table to center
<div class="container">
<table>
<tr>
<td style="vertical-align:center; text-align:center;">
<img src='images/img1.jpg' class="imgclass">
</td>
</div>
You can try absolute centering. Using this method, you don't have to alter your html or know the size of the image.
.container {
position:relative;
width: 70%;
min-height:400px;
overflow: hidden;
text-align: center;
}
.container img {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
max-height: 100%;
}
JSFiddle
If you know the dimension of the image, then following css will work for you:
img {
width:250px;
height:250px;
margin:0 auto;
display:block;
margin-top:calc(50% - 125px);
margin-top:-moz-calc(50% - 125px); /*for mozilla
margin-top: -webkit-calc(50% - 125px); /*for webkit browsers.
}
You don't need any special style for container. This is the list of compatible browsers: http://caniuse.com/calc
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/143/
If you only need ie9+ you can use transforms:
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
}
.container img {
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
If you know the exact size of the image you can use negative margins instead of translate. The margins will be half the size of the image.
Take another div inside of .container and place image inside of it. Then making .container div's css rule to display:table and display:table-cell; vertical-align:middle for inner div will do the trick.
HTML
<div class="container">
<div class="img-cont">
<img src='http://fc08.deviantart.net/images3/i/2004/09/1/0/flower_eyes.jpg' class="imgclass">
</div>
</div>
CSS
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
display:table;
background:#ccc;
}
.img-cont{
display:table-cell;
vertical-align:middle;
}
.container img {
max-height: 100%;
}
Here is a fiddle http://jsfiddle.net/v22rG/
I wanted to make a 15% height header and footer, and for the rest height should be main (with image). But unfortunately, the image is going too big and I don't know how to resize it to 100% width (of #all div) and 70% (of #all div).
Would appreciate any help.
The image as how it looks now.
html,
body {
margin:0;
padding:0;
height:100%;
width: 100%;
}
#all {
position:relative;
width: 60%;
height:100%;
margin: auto;
}
header#main-header{
display: block;
position: absolute;
background:#ff0;
height: 15%;
width: 100%;
z-index: 10;
}
#main {
display: block;
position: absolute;
top: 15%;
height: 30%;
}
footer{
display: block;
position:absolute;
bottom:0;
width:100%;
height:15%; /* Height of the footer */
background:#6cf;
z-index: 10;
}
try to use #main img {display:block; width:100% }
Also, I recommend you to use class instead id.
I need the following to happen in my website:
The counter and logo (top, bottom) should always have the same height and stay on the top and bottom even though the screen height will decrease/increase. BUT the 2 other divs in between should get smaller/bigger when the window changes. I hope with this example its easier to understand:
The logo will disappear when the screen height is too low, right now. Here is the css:
The section is 80% width and aside 20%, but that doesnt really matter here...
#countdown{
padding: 0.5em 0.5em 0.5em 3em;
margin: 0.5em;}
#addProject{
margin: 0.5em;
padding: 0 1em;
height: 44%;
overflow-y: auto;}
#Nye{
margin: 0.5em;
padding: 0 1em;
overflow-y: auto;
height: 40%;
}
#logo{
margin: 1em;
height: 5em;
}
#Rémi offered a good start, but I would recommend using position: fixed.
This will anchor your elements to the browser window, regardless of the amount of your content.
e.g.:
.counter, .middle1, .middle2, .logo {
position: fixed;
width: 20%;
min-width: 200px;
right:0;
}
.counter {
background: yellow;
top:0;
height: 50px;
}
.middle1 {
overflow: scroll;
background: blue;
top:50px;
bottom: 50%;
}
.middle2 {
overflow: scroll;
background: green;
top: 50%;
bottom:50px;
}
.logo {
background: pink;
bottom:0;
height: 50px;
}
See http://jsfiddle.net/uKPEn/1/
It's a little tricky but I discovered by doing it that it is actually doable without javascript. Here is a fiddle to illustrate it http://jsfiddle.net/2LyUy/3/
You have to do 3 things:
wrap your two middle divs in a new div, for example with id="wrap".
put a different position attribute on your aside (for example "relative", which will actually not move your div at all)
then have fixed size counter and logo
The css gives that (don't forget to wrap your 2 middle divs with a new one):
aside#test { position: relative; }
/* so that the "absolute" below work as expected */
/* any of "relative" "absolute" or "fixed" positioning would work here, depending on the needs */
#countdown {
position: absolute; left:0; right:0; /* could be factored out if preferred */
top:0; height: 150px;
}
#logo {
position: absolute; left:0; right:0;
bottom:0; height: 50px;
}
#wrap {
position: absolute; left:0; right:0;
top:150px; bottom: 50px;
}
#addProject {
position: absolute; left:0; right:0;
top:0; height:50%;
}
#Nye {
position: absolute; left:0; right:0;
bottom:0; height:50%;
}
Here is the div wrapping code extract:
</div></div>
<div id="wrap"> <!-- added -->
<div id="addProject"
....
<br>
</div>
</div> <!-- added -->
<div .... id="logo"></div>