I have images that are responsive in size and I'm trying to overlay a play icon in the center of them. I'm able to center the icon vertically but not horizontally.
See my jsfidde
HTML:
<div class="img-container">
<img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;">
<div class="post-video-overlay-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</div>
</div>
CSS:
.post-video-overlay-lg {
position: absolute;
font-size: 72px;
color: #E5E5E5;
text-align: center;
width: 100%;
}
.img-container {
position: relative;
width:315px;
height:auto;
display:block;
margin:auto;
cursor:pointer;
}
Any idea what I'm missing?
Firstly you have to position the overlay div over the image/video..then position the span.
.post-video-overlay-lg {
position: absolute;
top:0;
left:0;
font-size: 72px;
color: #E5E5E5;
text-align: center;
width: 100%;
height: 100%;
}
.post-video-overlay-lg span {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.img-container {
position: relative;
margin: auto;
width:315px;
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.img-container img {
display: block;
}
<div class="img-container">
<img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;" />
<div class="post-video-overlay-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</div>
</div>
JSfiddle Demo
Here is the Fiddle: http://jsfiddle.net/f1becapq/3/
Updated the css for .post-video-overlay-lg
.post-video-overlay-lg {
position: absolute;
font-size: 72px;
color: #E5E5E5;
text-align: center;
left: 0;
right: 0;
top: -webkit-calc(50% - 36px); /* 36px = 72px/2 */
top: -moz-calc(50% - 36px);
top: calc(50% - 36px);
}
Used the CSS calc function to vertically align the div in runtime
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am pretty new to CSS and looked at some guide about how to center a text inside a div, but now it's not fully, but just almost centered...
Image: https://cdn.discordapp.com/attachments/554447633197039627/595281754135199754/unknown.png
CSS:
.info { /* Background (div)*/
background-color: red;
height: 10em;
width: 50em;
position: absolute;
left: 50%;
top: 50%;
margin:-5em 0 0 -25em;
text-align: center;
}
.info-text { /* Text (span) */
font-size: 6em;
display: inline-block;
vertical-align: middle;
}
u can use flex display to the parent with align-items:center and justify-content:space-between
there is other methods but i prefer this one!
*{
margin:0;
padding:0;
}
.center-text{
width:300px;
height:150px;
background:red;
display:flex;
align-items:center;
justify-content:space-around;
}
p{
font-size:30px;
}
<div class="center-text">
<p>Hello World</p>
</div>
you can center vertical and horizontal using the below css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
below is the working snippet
.parent {
background: red;
height: 100vh
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 23px;
color: #fff
}
<div class="parent">
<div class="center">Vertical and horizontal center</div>
</div>
.info { /* Background (div)*/
background-color: red;
height: 10em;
width: 50em;
position: relative;
}
.info-text { /* Text (span) */
font-size: 6em;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="info">
<div class="info-text">Text</div>
</div>
You can accomplish that by setting the line-height in .info-text with same height as is your .info
In your case, I've changed the unit to px and as you can see, .info has height: 100px; - from that I've added line-height: 100px; in .info-text
It will be in perfect center as long as you keep the line-height same as height.
.info { /* Background (div)*/
background-color: red;
height: 100px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -250px;
text-align: center;
}
.info-text { /* Text (span) */
position: relative;
font-size: 60px;
line-height: 100px;
display: inline-block;
}
<div class="info">
<span class="info-text">CRUGG</span>
</div>
You don't need absolute positioning at all, just use flexbox to center horizontally and to align the text at the bottom of your container, use text-align:center and relative position for the text. With relative position you will be able to easily move it outside of the container with the bottom property
Example:
.info { /* Background (div)*/
position:absolute;
top:0;
bottom:0;
margin:auto;
background-color: red;
height: 10em;
width: 100%;
display:flex;
justify-content:center;
align-items:flex-end;
z-index:99;
}
.info-text { /* Text (span) */
font-size: 6em;
position:relative;
bottom:-0.5em;
}
<div class="info">
<div class="info-text">Text</div>
</div>
You can set align-items:center if you want your text to be centered vertically too.
Example
.info { /* Background (div)*/
position:absolute;
top:0;
bottom:0;
margin:auto;
background-color: red;
height: 10em;
width: 100%;
display:flex;
justify-content:center;
align-items:center;
z-index:99;
}
.info-text { /* Text (span) */
font-size: 6em;
position:relative;
}
<div class="info">
<div class="info-text">Text</div>
</div>
I am trying to vertically align in the middle several lines of text next to an image which is also centred in its own div.
The parent div of both picture and text div is responsive.
The way I align the picture seems to prevent alignment of the text. I tried with tables and other solutions (also found in stack overflow), but nothing seems to work.
What am I doing wrong?
.parent-wrapper {
position: absolute;
width: 100%;
border-bottom: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
margin-top: 1vw;
margin-bottom: 1vw;
}
.image-wrapper {
position: relative;
float: left;
width: 30%;
padding-top: 30%;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: no-repeat;
background-size: cover;
background-position: center;
min-width: 100%;
}
.text-wrapper {
position: relative;
float: right;
width: 70%;
padding-top: 30%;
overflow: hidden;
}
.text-details {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align: middle;
background: center;
}
.some-text {
font-size: 20px;
}
.other-text {
font-size: 20px;
}
.another-text {
font-size: 20px;
}
<div class="parent-wrapper">
<div class="image-wrapper">
<div class="image" style="background-image: url('folder/picture.jpg');" alt="image">
</div>
</div>
<div class="text-wrapper">
<div class="text-details">
<div class="some-text">some text</div>
<div class="other-text">other text</div>
<div class="another-text">another text</div>
</div>
</div>
</div>
try this
.parent{
position:relative;
height:50vh;
background-color:blue;
}
.box-to-center{
position:absolute;
top:50%;
transform: translateY(-50%);
color:white;
}
<div class="parent">
<div class="box-to-center">
some content
</div>
</div>
I have a span tag. I'm loading an image inside this span tag using css. Now I wants to vertically centre this image inside the span tag. I can't vertically centre this image because I'm applying this image to span using CSS. Here I'm using an icon sprite and extracting only relevant part from the icon-sprite. Can anyone help?
HTML
<span class="icon"></span>
CSS
.icon{
background: url(../images/icon-sprite.png) no-repeat -328px 0;
width: 60px;
height: 40px;
position: absolute;
}
I tried adding line-height to .icon class. But no joy.
You will need to change the numbers in order for it to work for your icon, but this should do the trick.
.icon {
position: relative;
border:1px solid #FF0000;
white-space: nowrap;
}
.icon:before{
content: "";
position: relative;
width:15px;
display:inline-block;
}
.icon:after{
content: "";
position: absolute;
top: 50%;
left: 0;
margin-top: -8.5px;
width: 15px;
height: 18px;
background: url('https://www.google.com/images/nav_logo127.png') no-repeat -0px -327px;
}
<span class="icon" style="font-size:20px;">whatever</span>
<span class="icon" style="font-size:25px;">whatever</span>
<span class="icon" style="font-size:30px;">whatever</span>
<span class="icon" style="font-size:35px;">whatever</span>
<span class="icon" style="font-size:40px;">whatever</span>
<span class="icon" style="font-size:45px;">whatever</span>
The border and font size are just for the example.
Can use anyone:
.icon{
background: url(../images/icon-sprite.png) no-repeat;
background-position:left center;
width: 60px;
height: 40px;
position: absolute;
}
or
.icon{
background: url(../images/icon-sprite.png) no-repeat left center;
width: 60px;
height: 40px;
position: absolute;
}
Ideally here, you should have a parent class and try to vertically align .icon to the parent.
.parent {
position: relative;
width: 120px;
height: 80px;
}
.icon {
background: url(../images/icon-sprite.png) no-repeat -328px 0;
width: 60px;
height: 40px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
}
<div class="parent">
<span class="icon"></span>
</div>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 6 years ago.
I have a problem I can't solve. i m trying to center this black box inside red box which has absolute position. I tried making the black box to relative position but i feel like i am missing something.
Ultimately, i m trying to make the top header.
here is an image header-image.jpg
Help?
body.esc-layout {
min-width: 960px;
margin: 0 auto;
}
.promo-bar {
display: block;
}
.promo-bar .customer-care-wrapper {
float: left;
max-width: 50%;
}
.promo-bar .customer-care {
font-size: 11px;
color: #000;
margin-left: 15px;
display: block;
}
.promo-bar {
width: 100%;
min-height: 32px;
position: relative;
height: auto;
overflow: visible;
z-index: 5;
background-color: #EEE;
overflow: hidden;
}
.promo-bar .service-message-wrapper {
padding-top: 2px;
max-width: 50%;
margin: 0 auto;
position: relative;
}
.service-message-wrapper .service-banner{
position: absolute;
left: 0px;
right: 0px;
text-align: center;
background: red;
}
.caption-wrapper{
position: relative;
background: black;
}
.service-message-wrapper .captions{
font-family: inherit;
font-style: italic;
font-size: 14px;
color: white;
}
<body class="esc-layout">
<div class="promo-bar">
<div class="customer-care-wrapper promo-block">
<div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
" Contact us 24/7: "
</div>
</div>
<div class="service-message-wrapper promo-block" style="height: 28px;">
<div class="service-banner service-message-1" style="margin-top: 0px;">
<div class="caption-wrapper">
<p class="captions">
<span> Same-day delivery to New York </span>
</p>
</div>
</div>
</div>
</div>
</body>
You can use position: absolute with a combination of top and transform.
The trick is that in top: 50%, the 50% refers to the parent height. In transform, 50% refers to the element's own height.
.outer {
height: 50px;
width: 50%;
position: absolute;
top: 0;
right: 0;
background: red;
}
.inner {
position: absolute;
left: 0;
/* make the top edge of .inner appear in the vertical center of .outer */
top: 50%;
/* move .inner up by half of its height so that its middle is in the middle of .outer */
transform: translateY(-50%);
height: 20px;
width: 100%;
background: black;
}
<div class="outer">
<div class="inner"></div>
</div>
More info: http://howtocenterincss.com/
Centering inside an absolute element, the inner element needs to be absolute give a width and height.
.red-box{
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.black-box{
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
<div class="red-box">
<div class="black-box"> </div>
</div>
working sample (click run button)
For center div it is very easy to use flex box.
div.outer {
align-items: center;
background: red none repeat scroll 0 0;
display: flex;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
div.inner {
background: black none repeat scroll 0 0;
height: 20px;
left: 0;
width: 100%;
}
<html><head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Do not forget using webkit for safari and chrome and in your case I think it's better to set margin:0 for <p> for better control
p.captions{margin:0;}
I am centering an image in the following code but as I center it the background fades.I have managed to put the image in the center but with the background color. How to fix this ? Please do tell how to position image as well?
HTML
<section id="contact">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-5 centered">
<img src="something.jpg" alt="">
</div>
</div>
</div>
</section>
CSS
#contact
{
background-color:black;
}
.container
{
text-align: center;
position:absolute;
margin:0;
padding:0;
top:50%;
left:50%;
transform: translate3d(-50%, -50%,0);
}
#contact .centered
{
float:none;
margin:0 auto;
}
#contact img
{
border-radius:50%;
border: 4px solid #fff;
}
If you give outer position absolute and container position relative , it can help you and for left, top 50% values, make them in the outer div because you put them one within the other
#contact{
background-color: black;
position: absolute;
top: 50%;
left: 50%;
}
.container
{
text-align: center;
position: relative;
margin: 0;
padding: 0;
top: 50%;
/* left: 50%; */
/* transform: translate3d(-50%, -50%,0); */
}
https://jsfiddle.net/hemnathmouli/jp7gydwf/
Try this.
<div class = "image">
<img src = "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" alt="myimage">
<span class = "caption">
Hello World.!
</span>
</div>
Css:
.image{
position: relative;
text-align: center;
display: table;
}
.caption{
position: absolute;
background: black;
padding: 10px;
color: white;
width: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This will work transform: translate(-50%, -50%);