I want to center a paragraph which is positioned absolute inside another div positioned relative. The problem is since this is absolute I can't use text-align: center! Also I want to center the paragraph both vertically and horizontally.. .
My HTML looks like this
<div class="top">
<p class="same">Django</p>
</div>
CSS
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
}
I want the paragraph text 'Django' to be in the center both vertically and horizontally
(http://i.imgur.com/MNcaBYs.jpg)
You don't need absolute positioning at all to achieve what you want :
.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }
You can force paragraphs to have inline layout and then center them horizontally using text-align: center. To center them vertically just add line-height to paragraph equal to container's height (it is not a problem here as you container's height is fixed). If you don't want to set display: inline explicitly, you can just use span instead of p.
JSFiddle
You can achieve that in following way.
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
height: 50%; /* This is mandatory i.e. this should not be auto */
text-align: center;
width: 70%; /*This is not mandatory*/
/* The code below is required to horizontally and vertically center the <p> element */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Related
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I have a quiet simple html structure but I can't figure out what I have to do to place the 8 on top of the 0 without losing the height of the wrapping div.
If I use for example float or absolute position on both spans, the divs height is reduced to 0. If I use a combination of absolute position and float on the second div, I cant manage to properly center the span horizontally in the container.
I hope you can tell me what I'm doing wrong and how I can move the second span on top of the first one while letting the first span determine the height of the wrapping div.
#wrapper {
position: relative;
width: 100%;
text-align: center;
}
#first {
}
#first {
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
You can center absolutely-positioned elements by using a combination of left: 50% and a negative transform, which will allow you to center the 8 element above the 0:
#wrapper {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#first, #second {
color: white;
display: block;
}
#first {
background: blue;
height: 50px;
padding: 30px
}
#second {
background: red;
height: 10px;
padding: 10px;
position: absolute;
top: 0;
left:50%;
transform: translateX(-50%);
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
I have a div with position: fixed; whose height changes according to height of browser window. And I want to horizontally center text span inside that div. How can I accomplish this using just CSS? (Also, I want to make it IE8 compatible.)
#fixed_div{
position: fixed;
top: 40px;
bottom: 40px;
right: 0px;
width: 40px;
}
#text_span{
/* ??? */
}
The top: 50% trick won't be precise, since it will be a little lower, there are couple of tricks:
Span position is absolute, top is 50% AND margin-top -> -50% of the span height (can try with %, preferably with the height of the span if it's known).
#text_span {
position: absolute;
top: 50%;
margin-top: -50%; //or pixels (according to Mr. Green it has to be pixels)
width: 100%;
text-align: center;
}
Wrap the span with a div that has display: table, and the span is display: table-cell
#wrapper-div {
display: table;
height: 100%;
}
#text_span {
display: table-cell;
width: 100%;
vertical-align: middle;
}
Working fiddle for the table method: (it doesn't work on the fixed element directly, you have to add another element inside) http://jsfiddle.net/a4ndeza5/1/
Hope this helps.
I am having trouble centering these hidden images in there divs. I want the displayed image centred and the thumbnails underneath?
here is the fiddle: http://jsfiddle.net/rabelais/mj7ba/1/
.displayed-image img {
height: 200px;
position: absolute;
top: 10px;
text-align: centre;
}
.thumbnails {
position: absolute;
top: 250px;
text-align: centre;
}
First: The text-align property should be applied to a block container and then it will centre that container's inline content. You should never apply it to an image, since an image is usually an inline element and can never be a container.
Second: Absolutely positioning an element takes it out of normal flow, so it can't be aligned normally.
Third: Most computer languages use American English, not standard English. Centre is spelt center.
You need something more along the lines of:
.displayed-image {
text-align: center;
}
.displayed-image img {
height: 200px;
}
.thumbnails {
text-align: center;
}
.thumbnails img {
height: 70px;
border: 1px solid;
}
Here is working example.
Problem was with containers.
Js fiddle
left. It will work.
.displayed-image img {
height: 200px;
position: absolute;
top: 10px;
text-align: centre;
margin-left:200px;
}
.thumbnails {
position: absolute;
top: 250px;
text-align: centre;
margin-left:200px;
}
If you want any other help just let me know.
I initially had vertically centered text using the table/table-cell display method, which worked great. The problem came when I switched to a percentage height for the container and used a block level image (sibling to the text in question) to set the size of the container. I can no longer get the absolutely positioned text to equal the container height without declaring a static container size. Obviously this is simple to solve with JS, but I'd prefer not to go that route.
I'm also using picturefill.js to serve images, so using the image as a css background isn't an option (unless anyone has suggestions to make it work).
Here's the fiddle:
http://jsfiddle.net/rHZdQ/
And here's the code:
HTML
<div class="tile">
<a href="#">
<img src="#">
<div class="header-container">
<h2>title</h2>
</div>
</a>
</div>
CSS
.tile {
position: relative;
}
img {
display: block;
}
a {
display: block;
position: relative;
}
.header-container {
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
h2 {
display: table-cell;
text-align: center;
vertical-align: middle;
z-index: 199;
}
Centering Text in an Absolutely Positioned Image Overlay Using CSS
Consider the following HTML snippet:
<div class="tile">
<div class="image-container">
<img src="http://placekitten.com/400/400">
</div>
<div class="header-container">
<div class="panel">
<h2><span>percentage sized div</span></h2>
</div>
</div>
</div>
and apply the following CSS rules:
.tile {
border: 3px solid #555;
position: relative;
margin: 6px;
float: left;
}
.image-container img {
display: block;
height: 100%;
width: 100%;
}
.header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-container .panel {
display: table;
width: 100%;
height: 100%;
}
.header-container .panel h2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.header-container .panel h2 span {
display: inline-block;
padding: 5px;
border-radius: 5px;
background-color: rgba(255,255,255,0.5);
}
The parent/containing block is div.tile, and it has two child elements, .image-container which is in-flow, and .header-container which is absolutely positioned and hence out-of-flow.
Since .tile is floated, it shrinks-to-fit the content, which is the image in .image-container, with the dimensions determined by the native height and width of the image.
To create the overlay, .header-container is absolutely positioned to the top and left of its relatively positioned parent, with 100% width and height which forces it to extend to the containing block (see yellow outline).
Within .header-container, create an anonymous table by setting display: table to .panel, and specify 100% width and height so it extends and fills the .header-container.
Finally, define an anonymous table-cell on .panel's nested <h2> element, and apply text-align: center and vertical-align: middle to center the text post horizontally and vertically.
Note that the table-cell will extend the full width and height of the table so if you want to style the text with a border or background, you need to wrap it an inline-block element (the <span> in my example).
You can view the code at: jsFiddle Demo
Does your .header-container need to be width:100%? Can you use pixels instead?
If you use pixels and you do the following, then it will center it:
.header-container {
display: table;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 400px;
margin-left:-200px;
}
Basically, margin-left has to be equal with half the width and a minus in fornt and then left:50%
UPDATE:
After informing me that it has to be only with percentage, the Jquery would be this:
$(document).ready(function() {
var minus = '-';
var headerwidth = $(".header-container").width();
$(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
$(".header-container").css('left','50%');
});
I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>