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;}
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'm trying to place two images on top of each other, with both of the images horizontally and vertically centered inside their container.
One of the images will be have its opacity animated to reveal the image underneath.
The images are both the same size, but I don't know the size of the images beforehand. I also would like to do this in just pure CSS and HTML.
Here is what I ended up with.
.data-box{
border: 2px solid #d4d4d4;
border-radius: 3px;
display: flex;
height: 120px;
margin: 5px;
margin-bottom: 10px;
margin-right: 10px;
padding: 0;
position: relative;
width: 120px;
}
.logo {
align-items: center;
display: flex;
justify-content: center;
margin: auto;
position: relative;
}
.data-name {
position: absolute;
width: 100%;
height: 23px;
bottom: 0px;
right: 0px;
background: rgba(200, 200, 200, 0.3);
}
span {
position: absolute;
width: 100%;
bottom: 2px;
text-align: center;
}
img {
position: absolute;
}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span></div>
</div>
I made the images position: absolute so they would leave the normal flow of the browser and render directly on top of each other instead of next to each other.
This works correctly in Chrome, but in Firefox and Safari the image's top left corner is horizontally and vertically centered:
How can I horizontally and vertically center these images while still having them render directly on top of each other?
Solution
Add this to your code:
img {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.data-box {
border: 2px solid #d4d4d4;
border-radius: 3px;
display: flex;
height: 120px;
margin: 5px;
margin-bottom: 10px;
margin-right: 10px;
padding: 0;
position: relative;
width: 120px;
}
.logo {
align-items: center;
display: flex;
justify-content: center;
margin: auto;
position: relative;
}
.data-name {
position: absolute;
width: 100%;
height: 23px;
bottom: 0px;
right: 0px;
background: rgba(200, 200, 200, 0.3);
}
span {
position: absolute;
width: 100%;
bottom: 2px;
text-align: center;
}
img {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span>
</div>
</div>
Explanation
Although setting an element to position: absolute removes it from the normal flow, it doesn't actually position it anywhere.
The CSS offset properties (top, bottom, left and right) have an initial value of auto, which keeps an absolutely positioned element where it normally would be if it were in the document flow. As you can see, browser behavior will vary when the offsets aren't defined.
For an explanation of how the code above works, see this post: Element will not stay centered, especially when re-sizing screen
I don't think you need flexbox at all:
.data-box {position:relative; display:inline-block;}
.logo {position:relative;}
.color-image {position:absolute; top:0; left:0; bottom:0; right:0; opacity:0.5;}
.data-name {position:absolute; left:0; right:0; bottom:5px; text-align:center;}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span></div>
</div>
Could you set the img in a div, and have the behind image set as the background of the div?
It's not the most elegant solution but this works:
img {
position: absolute;
transform: translate(-50%, -50%);
}
I'll try to get straight to the point.
Here's an example that centralizes two images inside a parent.
<html>
<head>
<title>Exemple</title>
<style type="text/css">
.parent{
margin: auto auto;
width: 500px;
height: 500px;
border: 3px solid #ccc;
}
.child1, .child2{
width: 50%;
height: 50%;
margin: 25%;
background-color: rgb(226,26,60);
}
.child1{
opacity:0.5;
}
</style>
</head>
<body>
<div class="parent">
<img class="child1" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="child2" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
</body>
</html>
Use margin with percentage to align both images in the middle of the
parent div. Here I set the with and height to 50%, which means there's
50% left. That's why you set the margin to 25%, so he puts it in the
middle of the parent.
Good luck
I'm having trouble with a simple layout for a navigation bar. The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
http://jsfiddle.net/digorydoo/j2v5m7gr/
I just can't figure out what's wrong with my layout.
HTML:
<div class="outer-frame">
<div class="nav-frame">
<div class="nav-cell">
<div class="nav-icon">🏠</div>
</div>
<div class="nav-cell">
<div class="nav-icon">💊</div>
</div>
<div class="nav-cell">
<div class="nav-icon">🎫</div>
</div>
</div>
</div>
CSS:
/* box around everything */
.outer-frame {
position: relative;
/* origin for absolute pos'ed children */
margin-left: auto;
margin-right: auto;
margin-bottom: 12pt;
width: 200px;
height: 190px;
border: 1px solid #f0f0f0;
background-color: #fafafa;
}
/* grey area to the left */
.nav-frame {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
width: 36px;
height: 100%;
background-color: grey;
}
/* the outer container of the icon */
.nav-cell {
position: relative;
display: block;
box-sizing: border-box;
width: 36px;
height: 38px;
background-color: yellow;
margin-top: 4px;
}
/* the inner container of the icon */
.nav-icon {
display: block;
background-color: white;
border: 1px solid orange;
width: 8px;
height: 8px;
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
This is one of the ways to center it vertically and horizontally, you need to position it absolutely, set the margin to auto and all four sides to zero (or an offset, but you need to define it):
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
See it here: http://jsfiddle.net/j2v5m7gr/7/
The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
Here you go: http://jsfiddle.net/j2v5m7gr/10/ The same approach from above.
How to center (vertically,horizontally) properly over an image in a ?
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="image.jpg" />
</div>
</div>
CSS
.category-info {
text-align: center;
height: 200px;
width: 770px;
overflow: auto;
margin-bottom: 20px;
}
The image is 770px width and 200px height. I don't what to do next with . I tried several things, without success.
Here you go: http://jsfiddle.net/QjLuP/4/
The CSS:
.image{
position: relative;
background: green; /* IE */
}
.image h1{
z-index: 2;
position: absolute;
top: 50%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
margin-top: -13px; /* 1/2 height */
text-align: center;
background: red;
background: rgba(170, 0, 0, 0.8); /* CSS3 */
}
.image img{
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}
I threw a position relative on the .image class and set the width and height on the image element (that way it doesn't resize when it loads). I changed the table back to the h1 and added your line-height of 200px. That is the only downside, you'll still have to manually set the line-height of the h1.
HTML:
<div class="category-info">
<div class="image">
<h1>Title</h1>
<img src="http://placekitten.com/770/200" />
</div>
</div>
CSS:
.category-info {
text-align: center;
margin-bottom: 20px;
}
.image{
position:relative;
}
.image img{
width:770px;
height:200px;
}
.image h1{
position:absolute;
width:100%;
color:white;
line-height:200px;
margin:0;
}
JSFiddle: http://jsfiddle.net/5wGwL/2/
Have you tried this?
h1 { text-align:center; }
html
<h1 style="background-image:url(your php source.img)">Title</h1>
css :
h1 {
height: 200px;
width: 770px;
margin-bottom: 20px;
text-align:center;
vertical-align:middle;
line-height:200px;
background:transparent no-repeat scroll 50% 50%;
}
and nothing else