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
Related
I'm not getting it, why can't I use % value for the top in .bg h1? There's defined height by padding-bottom for the element, so it sound like the formal thing to set the height. Is there any workaround of this, but without making it absolute and so it would be responsive.
html,
body {
margin: 0;
padding: 0;
}
.bg {
background: #333;
text-align: center;
position: relative;
height: auto;
padding-bottom: 20%;
}
.bg h1 {
color: #eee;
margin: 0;
padding: 0;
position: relative; //change to absolute to ensure
//there is height value set without text inside
top: 50%; //50px DOES work
}
<div class="bg">
<h1>text</h1>
</div>
html, body {
margin:0;
padding:0;
}
.bg {
background:#333;
//text-align:center;
//position:relative;
//height: auto;
//padding-bottom: 20%;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.bg h1 {
color:#eee;
margin:0;
padding:0;
//position: absolute; //change to absolute to ensure
//there is height value set without text inside
//top:50%; //50px DOES work
}
<div class="bg">
<h1>text</h1>
</div>
I suggest display: flex;
html, body {
margin:0;
padding:0;
}
.bg {
background:#333;
text-align:center;
position:relative;
//height: auto;
//padding-bottom: 20%;
height: 100px;
}
.bg h1 {
color:#eee;
//margin:0;
padding:0;
position: absolute; //change to absolute to ensure
//there is height value set without text inside
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="bg">
<h1>text</h1>
</div>
Please check this. Give height as you want in .bg class. In class .bg h1 give top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); for centering text.
html, body {
margin:0;
padding:0;
}
.bg {
background:#333;
text-align:center;
position:relative;
height: 100px;
}
.bg h1 {
color:#eee;
margin:0;
padding:0;
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="bg">
<h1>text</h1>
</div>
Using inline-block and a pseudo element. which eill be too thin and with matching background with .bg to be noticeable.
html,body{
height:100%;
}
.bg{
background: #333;
text-align: center;
position: relative;
height: auto;
/* padding-bottom: 20%; */
/* height:100px; */
padding:10% 0;
}
.pseudo{
display: inline-block;
width:1px;
height:100%;
vertical-align:middle;
background:#cccccc;
}
.bg h1{
display: inline-block;
vertical-align:middle;
color: #eee;
margin: 0;
padding: 0;
}
<div class="bg">
<div class="pseudo"></div>
<h1>text</h1>
</div>
How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.
to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1
#headerImage {
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
#greeting{
padding: 0px;
position: relative;
}
#greetin-h1{
text-align: center;
color:#000;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 9999;
}
<div id="greeting">
<img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
Why not using the image as background?
html, body{
width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#greetin-h1{
text-align: center;
color:black;
}
<div id="greeting">
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use a combination of relative and absolute positioning, table and table-cell display like this:
CSS:
#headerImage {
position: relative;
text-align: center;
display: inline-block;
}
#headerImage img {
max-width: 100%;
}
#greeting {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#greetin-h1 {
margin: 0;
display: table;
width: 100%;
height: 100%;
}
#greetin-h1 span {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="headerImage">
<div id="greeting">
<h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
</div>
<img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>
Fiddle: https://jsfiddle.net/ve8sot21/1
This way the h1 will always be centered horizontally and vertically no matter the image dimension.
.wrapper {
position: relative;
}
img {
display: block;
width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: gold;
}
<div class="wrapper">
<img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
<h1>Hello, World!</h1>
</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'm trying to center a div inside a parent div based on the dimensions of the parent div. I have tried using:
display: inline-block;
because I have seen other questions where this was used to center the div but I am not having luck.
BOX1 should be centered insdie of test
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
display: inline-block;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
http://jsfiddle.net/bahanson/xvL2qvx0/5/
try this :demo
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
margin:0 auto;
width: 500px;
height: 300px;
background: lightgrey;
position:relative;
z-index:1;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div id="test" class="tab-pane">
<div id="BOX1">
<div id="Box2">
<h1> Graph Text </h1>
</div>
</div>
</div>
Adding this to the box 1 css does what you want and will keep the child centered if the parent width changes.
left: 50%;
margin-left: -250px;
http://jsfiddle.net/xvL2qvx0/6/
If you don't need IE8 support you can just use:
left: calc(50% - 250px);
You should read up on normal flow and CSS positioning.
http://webdesign.about.com/od/cssglossary/g/bldefnormalflow.htm
But basically, a div will always position relative to the parent div.
If you add margin: 0 auto; to a div, it should horizontally position it within the parent div
#BOX1 {
display: inline-block;
margin-left:100px;
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
}
use margin-left command to adjust it to the centre....
Seen as though you are using absolute positioning you can simply give it a top,right,left and bottom of 0 and use margin:auto to centre it both horizontally and vertically.
This benefits from be able to use relative (percentage) sizing if you want and there's no maths involved. Furthermore, if you later change the dimensions (maybe via a media-query for mobile devices) you don't need to recalculate messy margins or offsets - just change the size and it will be centred.
#BOX1 {
display: block;
width: 500px; /* it will still work if you change the size */
height: 300px; /* the dimensions could be percentages if you like */
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
http://jsfiddle.net/xvL2qvx0/7/
#test {
width:700px;
height: 500px;
background: grey;
position:relative;
}
#BOX1 {
width: 500px;
height: 300px;
background: lightgrey;
position:absolute;
z-index:1;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#Box2{
width: 250px;
height: 50px;
background: lightblue;
position:absolute;
left: 125px;
z-index:2;
}
h1 {
font: 25px Helvetica, sans-serif;
text-align: center;
}
<div class="tab-pane" id = "test">
<div id="Box2">
<h1> Graph Text </h1>
</div>
<div id="BOX1">
</div>
</div>
I have some elements that are getting out of my parent div. Why?
Here is what I have
CSS:
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
And HTML:
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
The problem is with headers and action always getting out of parent div. I don't know why, because all the widhts are inherited from parent div, and my header and actions div are always getting out of parent?
UPDATE 3
The solution is to add a content box around the content and let him have the scrollbar.
See this example.
HTML
<div class="viewer-v3 lightbox">
<div class="borderLightbox">
<div class="headerLightbox">
HEADER
<div class="actionsLightbox">
ACTIONS
</div>
</div>
<div class="contentbox">
<img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
</div>
</div>
</div>
CSS
.lightbox img {
margin-top: 2%;
}
.viewer-v3.lightbox {
overflow: auto;
display: block;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
background: black;
background: rgba(0,0,0,0.8);
}
.viewer img {
margin-top: 2%;
max-width: 100%;
margin-bottom: 2%;
}
.contentbox {
height: 100%;
overflow: auto;
}
.borderLightbox
{
border:#cccccc;
border-width:1%;
border-top-style:none;
border-right-style:solid;
border-bottom-style :solid;
border-left-style:solid;
position:relative;
width: 80%;
height: 100%;
background-color:#e5e5e5;
margin-left:auto;
margin-right:auto;
overflow: visible;
}
.headerLightbox
{
position:fixed;
background-color:#e5e5e5;
border:#cccccc;
border-width:1%;
width: inherit;
float:left;
border-top-style:solid;
border-right-style:none;
border-bottom-style :none;
border-left-style:none;
}
.actionsLightbox
{
background-color:#ffffff;
}
UPDATE 2
Understood your requirements, and I am afraid it is not possible.
The reason for the behavior is that .viewer gets a scrollbar, therefore its content width won't equal to the width of the body.
Thus: 80% of viewer != 80% of body (which is what you have for the position: fixed .header)
To see what I mean, just remove the height: 100% from the .viewer, and everything pops into place (only that .viewer won't be scrollable which is a no go)
UPDATE 1
If you need it fixed: do pixel sizes help?
.borderLightbox {
width: 500px;
}
http://jsbin.com/AkAhawa/5
ORIGINAL
It is because you have the position: fixed; property.
Think about it as that takes it out of the context of its parent and makes the body its parent, so from then on, positioning and sizing the .headerLightbox will be relative to the viewport.
If you wish to simply display the header with width: 100% (regarding its parent) then use
.headerLightbox
{
width: 100%;
}