Not sure what I am getting wrong here, but let's say I have two divs, and an h1 element (or P1) for that matter that looks like this:
<div class="wrapper">
<div class="top">
<h1>Content header</h1>
</div>
</div>
I want my element to appear in the 'center middle' of the inner div, that is it's immediate parent. To achieve this, I give it a margin-top:50% & a margin-left:50% with the understanding that this would render it exactly towards the center middle of the div. But while it does get it to the middle, it doesn't quite get it to the center. Infact it seems to position itself relative to the outer div, the one with class wrapper.
I have recreated this using jsfiddle here:
http://jsfiddle.net/KLRsN/
Am I specifying the selectors wrong or is my positioning in itself incorrect?
-the above ans isnt completely correct as the text will still not be completely centered vertically.
.wrapper{
margin:5px;
max-height:250px;
min-height:250px;/*not required only height:250px will do*/
border:1px solid green;
}
.content
{
margin:5px;
border:1px solid black;
height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
width:100px;
position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
position:absolute;
top:50%;
left:50%;
line-height:50px;
width:50px;
margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}
explanation:
-ever element in html is in the form of a rectangular box so applying margin-top:50% is aligning the top of that box to 50% of the parent element and not the text inside the box.
-that is the reason the text is not exactly aligned to the center.
-also it is essential to provide the parent element(within which you wish to center the h1) a width and height.
The correct way to do what you are looking for would be by using absolute and relative positioning.
-give the .container a position value of relative and the h1 a value of absolute
-by giving the h1 a width and height we then apply a negative left margin equal to half the width and a negative top margin equal to half the height so that the text is exactly centered.
also for more on positioning - check out the following link
If you want to display text content at a middle you can use text-align:center , or you can apply width to your h1 tag and use margin:auto. To position it vertically middle use relative position and top:50% . Try this css
.wrapper{
height:250px;
min-height:250px;
border:1px solid green;
}
.content{
position:relative;
top:50%;
border:1px solid black;
}
.content h1{
border:1px solid blue;
margin:auto;
width:100px;
background:red
}
Hope it helps
Related
My goal is to align <h1> on top of and alongside the bottom part of an <img> using css and html. When you scale the window, the size of the image will increase (both vertically and horizontally), and I want the text to be aligned on top of the image, following the bottom line. Currently I am using some percentage of the width and height to align the text, but you never know if the text will actually be aligned at the bottom.
I have also included an example with a desired result. The red box with the blue text aligned to the bottom is what I want to accomplish, and I have used an element with variable height and width.
I therefore thought if it was possible to scale the container of the <img> proportional to the image itself, I could achieve the same result.
Some extra information
I do not want to use css grid
I do not know the ratio of the images in my application.
I have the following css and html
container{
position:relative;
height:100%;
}
img{
position: absolute;
width:100%;
height:auto;
z-index:1;
}
h1{
position:absolute;
top:30vw;
left:50vw;
color:red;
z-index:10;
}
.variable-container{
position:relative;
text-align:center;
height:70vw;
width:50vw;
background-color:#de2d3d;
}
h2{
width:100%;
position:absolute;
bottom:10px;
color:blue;
}
<div class="container">
<h1>Title</h1>
<img src="https://placebear.com/g/200/100.jpg">
</div>
<!-- This is what I am trying to accomplish -->
<div class="variable-container">
<h2>
Aligned bottom of box
</h2>
</div>
So the primary issue here is that the nested img element has been positioned absolute, taking it out the normal document flow. Because of this, the outer element (containing parent element) is unable to scale according to inner element (nested element) as it is no longer relative to the document flow.
Summary of changes:
Positioning of nested img element:
The nested img element position property changed from absolute
to relative, this property could probably be removed altogether (as
it doesn't seem necessary in this scope)
Positioning of nested h1 element:
The positioning of the nested h1 element has also been reworked, to
horizontally center an absolutely positioned element you could
always simply declare left and right properties with the unit
value of 0, and since h1 is a block element, simply declare
text-align: center to center the text.
For consistent positioning relative to the containing element, use
the bottom property instead of the top property; since the
requirement is to have this element remain positioned relative to the
bottom of the containing element. If the requirement where the
antithesis (positioned relative to the top of the containing
element), then using the top property would be applicable.
Image aspect ratio issues:
The first example demonstrates some issues with image aspect ratios,
so there is also a background-image alternative to refer to as
well.
Code Snippet Demonstration:
Note: You can manually resize the containing element (bottom-right corner) for the sake of demonstration.
.container{
position:relative;
height:100%;
}
img{
position: relative; /* to scale outer el same as inner el, inner el can't be out of normal document flow */
width:100%;
height:auto;
z-index:1;
}
h1{
position:absolute;
/* rather use `bottom` property if text needs to stay at bottom, and use an absolute unit value like `px` for most consistent positioning */
bottom:30px;
/* simply center an absolutely positionied element with properties `left` & `right` with values of `0` */
left:0;
right: 0;
text-align: center; /* then center text of block element */
color:red;
z-index:10;
margin: auto; /* unset vendor margin property */
}
.bg-img {
background-image: url(https://placebear.com/g/200/100.jpg);
background-size: cover;
height: 100%;
}
/* For the sake of demonstration */
.resize-demonstration {
overflow: hidden;
resize: auto;
padding: 15px;
border: 2px dashed #ccc;
}
<h2>Embedded Image</h2>
<div class="resize-demonstration">
<div class="container">
<h1>Title</h1>
<img src="https://placebear.com/g/200/100.jpg">
</div>
</div>
<h2>Background Image</h2>
<div class="resize-demonstration">
<div class="container bg-img" style="height: 300px">
<h1>Title</h1>
</div>
</div>
JSFiddle Demonstration
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
I want to place an absolute popup box at the end of text link.
HTML
<div style="float:left;">Hello World</div><div class="box">BOX</div>
CSS
.box
{
float:left;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
}
http://jsfiddle.net/7N6ye/1/
It works fine only when a box is relative. When I set position:absolute on the box, it looks like
http://jsfiddle.net/7N6ye/3/
Any ideas? Eventually, I'll have a list of links each of which has different text length. (And each box will popup at the end of text).
This might work:
<div class="box">Hello World<div>BOX</div></div>
with the CSS:
.box {
position: relative;
border: 1px solid red;
float: left;
}
.box div
{
position:absolute;
top: 0;
left: 100%;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
display: inline-box;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/DWe8B/
Notes
(1) I nested the popup box within the text line. I can work around that.
the problem is that the popup inherits the width of the parent, so the box
can be quite narrow unless you specify a width.
If you set the position to relative, the div is put relative to its original position.
e.g. 100px to the left from where you are
If you set the position to absolute, the div is put relative to its parent (the next parent with relative or absolute positioning).
e.g. 100px from the left corner of the parent
on top of that the div is no longer part of the document flow. So other elements can overlap with it.
The same is true for floating elements. Here the next available position is used.
In general it makes no sense to set absolute positioning as well as a float.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
So I'm putting together some alert system for a website I'm building. Layout is pretty simple:
<style>
#alert{
position:absolute;
padding:10px;
display:table;
margin:0 auto;
}
</style>
<div id="alert">
Hey user, I have a very important message for you.
</alert>
Now, if an element isn't absolutely positioned I normally use display:table to make sure it only takes the necessary amount of width, but absolutely positioning it kind of ruins that.
Is there a way to make it so that the element only takes the necessary amount of width, but still be absolutely positioned?
EDIT:
Basically what I am looking for is an absolutely positioned element that has dynamic width, and is centered.
This seemed to do the trick:
<style>
#alert {
position:absolute;
width:100%; /* Keep in mind this is for an entire page */
height: 16px; /* Match the font-size of the alert */
text-align:center;
cursor:pointer;
}
#alert #inner_alert {
display:inline-block;
padding:10px;
}
</style>
<div id="alert">
<div id="inner_alert">Here is the message!</div>
</div>
This will produce a centered element that will only be as wide as it needs to be and is absolutely positioned.
Hey now you can used left or right properties as like this
#alert{
position:absolute;
padding:10px;
left:0;
right:0;
top:0;
bottom:0;
}
hey now you can define your value in left right top bottom as according your layouts
if you define position absolute than define your div width or height
now you can used this one live demo http://jsfiddle.net/YvMAJ/